angular之自定义管道

Posted 2020-10-03 ypm_wbg

1，装了angular2 的 cli之后，cmd中命令建立个管道文件 ng g p <name>;

　　如建一个在pipe文件中建一个add.pipe.ts文件 可以这么么写 ng g p pipe/add;

2,  add.pipe.ts内容如下：

//原始内容
import { Pipe, PipeTransform } from ‘@angular/core‘;

@Pipe({
  name: ‘add‘
})
export class AddPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }

}
//修改transform里面的内容如下：

transform(value: any, arg1: any,arg2: any): any {
    return value;
  }

3，如将上面的管道用到 html 上；

如下写法

<ul *ngFor="let item of items | add:‘fang‘:true">
  <li>{{item}}</li>
</ul>

4，看第三步参数分别代表

　　第一个参数value 为items;

　　第二个参数arg1 为 ‘fang’;

　　第三个参数arg2 为true;

　　后面返回的数就会替换itemes 

5, 记得使用时要声明；将其加到 declarations数组里