这篇完全就是个人笔记了,大概记了一下服务,注入和管道的用法。
服务 (Service)
angular服务的主要目标是组织和共享业务逻辑、模型或数据。一般会在服务里写一些多个组件能共用的http请求。
新建服务
到项目目录下:
// 新建了一个名字叫abc的service
ng generate service abc
// 简写
ng g s abc
执行上述语句后,会生成abc.service.ts
文件,内容如下图,其中 @Injectable()
是装饰器。:
依赖注入
使用服务(service)需要注入实现,注入则相当于声明。
去到需要使用服务的组件中:
// 导包 Example
import { AbcService } from '../abc.service';
public data;
// 声明了一个私有的abc对象,并把它标记为AbcService的注入点
constructor(private abc: AbcService){}
// 创建一个函数,以从服务中获取数据
getData() {
this.abc.getXXX().subscribe(value => {
this.data = JSON.parse(value);
}
}
// 在ngOnInit中调用这个函数
ngOnInit() {
this.getData();
}
abc 服务:
// 添加一个 getXXX 方法,让它返回数据。
getXXX() {
return this.http.get('https://192.168.137.111/api/v1/xxx').pipe(
map(v => JSON.stringify(v))
)
}
管道 (PIPE)
- 常用的内置管道有:
lowercase
/uppercase
/slice
/date
(可以接受参数)/number
(可接受参数)/async
<p>My birthday is {{birthday | date:'yyyy-MM-dd HH:mm:ss'}}</p>
// 2位整数是2, 2位小数是 2-2(最少小数保持几位-最多小数保持几位)
<p>圆周率是 {{pi | number: '2.2-2'}}
- 自定义管道
@Pipe
新建管道:ng g pipe 管道名字
具体好像还没有用到过自定义管道。待我哪天用上了,再回来补充笔记。