Angualr4.x CLI 创建使用服务

目录

一、Angualr CLI 创建服务 1

二、创建服务命令 2

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

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

一、 Angualr CLI 创建服务

    Scaffold            Usage   

    Component   ng g component my-new-component 

    Service     ng g    service my-new-service      

二、创建服务命令

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);
}