4、angular4.x services服务

Angular4.x创建使用服务

一、 Angualr CLI创建服务

二、创建服务命令

ng g service my-new-service 
创建到指定目录下面 
ng g service services/storage

三、app.module.ts里面引入创建的服务

1.app.module.ts 里面引入创建的服务

import { StorageService } from './services/storage.service';

1. NgModule 里面的providers 里面依赖注入服务

@NgModule({ 
    declarations: [ 
        AppComponent, 
        HeaderComponent, 
        FooterComponent, 
        NewsComponent, 
        TodolistComponent ], 
        imports: [ 
            BrowserModule, 
            FormsModule 
            ], 
    providers: [StorageService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

四、使用的页面引入服务，注册服务

import { StorageService } from '../../services/storage.service';
constructor(private storage: StorageService) { }

使用

addData(){ 
    // alert(this.username); 
    this.list.push(this.username); 
    this.storage.set('todolist',this.list);
} 
removerData(key){ 
    console.log(key); 
    this.list.splice(key,1); 
    this.storage.set('todolist',this.list); 
}