angular中自定义管道符使用

首先，创建一个后缀名为.pipe.ts的文件（使用命令ng generate pipe heroe）：

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({

  name: "heroe"

})

export class HeroePipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {

　　//value就是管道符中传过来的值，下面就是要对传过来的值进行处理达到想要的结果

    if (value.length > 8) {

      value.splice(4, 9);

    }

    return value;

  }

}

在HTML中使用：

 <li *ngFor="let hero of heroes | heroe" (click)="onSelect(hero)">

手动创建的pipe.ts文件，需要在app.module.ts引入：

import { HeroePipe } from './heroe.pipe';

@NgModule({

  declarations: [..., HeroePipe],

  imports: [...],

  providers: [],

  bootstrap: [...]

})

export class AppModule {}

注：如果是使用命令（ng generate pipe heroe）创建则不需在app.module.ts中引入，使用命令行创建的会自动引入