创建服务
ng g service my-new-service 创建到指定目录下面 ng g service services/storage
app.module.ts 里面引入创建的服务
import { StorageService } from './services/storage.service';
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);
}
/*
1、ng g service services/storag
2、app.module.ts 里面引入创建的服务 并且声明
import { StorageService } from './services/storage.service'
providers: [StorageService]
3、在用到的组件里面
//引入服务
import { StorageService } from '../../services/storage.service';
//初始化
constructor(public storage:StorageService) {
let s=this.storage.get();
console.log(s);
}
*/
import { Component, OnInit } from '@angular/core';
//引入服务
import { StorageService } from '../../services/storage.service';
/*
不推荐
var storage=new StorageService();
console.log(storage);
*/
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
public keyword:string;
public historyList:any[]=[];
constructor(public storage:StorageService) {
}
ngOnInit() {
console.log('页面刷新会触发这个生命周期函数');
var searchlist:any=this.storage.get('searchlist');
if(searchlist){
this.historyList=searchlist;
}
}
doSearch(){
if(this.historyList.indexOf(this.keyword)==-1){
this.historyList.push(this.keyword);
this.storage.set('searchlist',this.historyList);
}
this.keyword='';
}
deleteHistroy(key){
this.historyList.splice(key,1);
this.storage.set('searchlist',this.historyList);
}
}