自定义管道

管道是使用 @Pipe装饰器修饰的类。

装饰器中的元数据name字段用来设置管道的名称（命名方式为首字母小写的驼峰式，不要使用 ’-‘ 连接符）使用管道的时候就采用name字段的值。

管道的类需要实现 PipeTransform 接口来执行转换。

定义完成的管道需要在NgModule中声明。

可以使用 ng generate pipe <name> 命令自动注册管道。

xxxxxxxxxx
// summary.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'summary'//管道名称
})
export class SummaryPipe implements PipeTransform {
  // transform的第一个参数是管道的输入,第二个参数是管道名冒号后面的参数
    transform(value: string, limit:number=50,
               suffixStr:string='...'){
    if(!value) return null

    return value.substring(0, limit) + suffixStr;
  }

}

xxxxxxxxxx
//app.module.ts
@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    PipeTestComponent,
    SummaryPipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]

})

xxxxxxxxxx
<!-- 输出1111111111...-->
<p>{{'1111111111111'|summary:10}}</p>
<!-- 输出1111111111XXX-->
<p>{{'1111111111111'|summary:10:'XXX'}}</p>

实时效果反馈

1.下列描述错误的是：

A 管道的类需要实现 PipeTransform 接口

B 管道的类是使用 @Pipe装饰器修饰的

C 使用管道的名字由name字段决定

D 自定义管道之后不需要在模块中声明

答案

1=>D