>服务层 ,storage.service.ts
~~~
public set(k:string,v:any){
localStorage.setItem(k,JSON.stringify(v));
}
public getByKey(k:string):[]{
return JSON.parse(localStorage.getItem(k));
}
~~~
>component.ts
~~~
public history:Array<string>=[];
public keywords:string;
ngOnInit(): void {
//刷新页面
console.log("刷新");
let historyList=this.substance.getByKey("history");
if(historyList){
this.history=historyList;
}
}
private saveHistory():void
{
if(this.history.indexOf(this.keywords)!=-1){
alert(this.keywords+"已经存在");
return;
}
this.history.push(this.keywords);
this.substance.set('history',this.history);
this.keywords='';
}
delete(index):void{
this.history.splice(index,1);
this.substance.set('history',this.history);
}
~~~
- 引言
- 安装angular9
- 入门
- 数据绑定
- 属性绑定
- 实体字符和转义
- html 模板运算
- css样式规范
- 数组与循环ngFor
- 条件ngIf
- 管道
- 事件执行
- 双向数据绑定mvvm
- todolist页面交互
- 公共服务层
- 数据持久化
- dom与ViewChild装饰器
- 父子组件传值
- 子父组件传值ViewChild
- 子父组件out装饰器
- 生命周期-挂/卸载
- es6语法io异步promise
- Rxjs异步数据流编程
- http_request
- axios异步数据
- 英雄route路由
- 动态route路由
- navigate route
- Parent child routing
- modularization
- lazyload