一、管道优点
（1）可以使用户的体验变得好
（2）可以省去一些重复性的工作
二、管道的常规使用
- 一般是用于 Mustache 语法（插值语法）的双向数据：
{{ item | json }} // 内置的 JsonPipe 管道 - 管道带参数
{{ item | slice:0:4 }} // 管道后面冒号跟随的就是参数
- 多重管道调用
{{ item | slice:0:4 | uppercase }}
这是使用了 "数据流" 的概念，用过 Linux 管道的小伙伴一看就知道了。
item 的输入数据给 slice 处理后再丢给 uppercase 处理，最终返回的结果集就是切割后并且转为大写字符的数据。
三、自定义管道
// 自定义管道必须依赖 Pipe 和 PipeTransform
import { Pipe, PipeTransform } from '@angular/core';
// 管道装饰符 ， name就是管道名称
@Pipe({ name: 'name' })
export class PipeNamePipe implements PipeTransform {
// value : 就是传入的值
// ...args : 参数集合(用了...拓展符),会把数组内的值依次作为参数传入
// ...args可以改成我们常规的写法(value:any,start:number,end:number)
transform(value: any, ...args: any[]): any {
}
}
实现一个切割字符串然后拼接...的管道【用于渲染数据过长截取】
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'SliceStr'
})
export class SliceStrPipe implements PipeTransform {
/**
* 截图字符串字符
* option(start,end,[+str])
*/
// start和end及extraStr后面都跟随了一个问号，代表这个为可选参数而不是必选的
// 功能就是拼接自定义的字符串(...)等
transform(value: string, start?: number, end?: number, extraStr?: string): string {
// console.log( value );
if (value) {
if (typeof (start) === 'number' && typeof (end) === 'number') {
if (value.length > end && extraStr && typeof (extraStr) === 'string') {
// console.log( start, end, extraStr );
return value.slice(start, end) + extraStr.toString();
} else {
return value.slice(start, end);
}
} else {
return value;
}
} else {
return value;
}
}
}
四、如何使一个自定义管道生效 ★★★
- 单一引入生效
// 功能管道
import { SliceStrPipe } from './SliceStr/slice-str.pipe';
@NgModule( {
imports: [
CommonModule
],
declarations: [
SliceStrPipe // 管道生效必须放到declarations里面
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
- 模块引入
如果写了一组管道，然后放到一个自定义模块里面，最后导出。在其他模块引入这个模块就能直接使用了。
import ..........
const pipe = [
IsCitizenIDPipe,
IsEmailPipe,
IsEnhancePasswordPipe,
IsFixedPhonePipe,
IsLicensePipe,
IsMobilePhonePipe,
IsNormalPasswordPipe,
IsNumberPipe,
IsUsernamePipe,
SliceStrPipe,
TimeDifferencePipe,
TransDatePipe,
ThousandSeparationPipe
];
// 这里是重点
@NgModule( {
imports: [
CommonModule
],
declarations: [
MitPipeComponent,
...pipe,
],
exports: [ ...pipe ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class MitPipeModule { }
// ----- 引入module
// 管道 -- 把MitPipeModule丢到imports里面就行了
import { MitPipeModule } from '../../../../../widgets/mit-pipe/mit-pipe.module';
