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中引入,使用命令行创建的会自动引入