首先介绍一下ng里的管道:
angular的自定义pipe
最基础的自定义pipe就是接收一个value,然后返回另外一个value。参数的形式不限,可以是string、number、object等任何类型。
接下来会做一个简单的自定义pipe的实例,比如我们在显示文件大小的时候,我们看到文件单位为byte需要转化为MB,这样相对来说可能会更好理解及清晰明了。在此之前,我们先了解下如何使用pipe。
当前例子的场景:后端返回我0,1,2对应的页面应该展示对应的文字,因为返回的是表格数据,并且字段有3个,用循环过于麻烦,所以直接使用自定义管道来显示当前的页面文字。
在终端输入:
ng g pipe xxxxx
在当前组建中创建一个自定义管道:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'carState',
})
// tslint:disable-next-line:class-name
export class carStatePipe implements PipeTransform {
constructor() { }
transform(value: string): any {
return value === '0' ? '不支持' : value === '1' ? '支持' : '临时维护';
}
}
在使用这个管道的组件module.ts里引入
然后在html里使用当前管道