Angular自定義管道
阿新 • • 發佈:2020-08-18
1.alarm-piple.piple.ts
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'alarmPipe' }) export class AlarmPipePipe implements PipeTransform { transform(value: any, args?: any): any { let res: string; if (value === 1) { res = 'TRUE'; } else if (value === 0) { res = 'FALSE'; } else if (value === -1) { res = 'UNVERIFIED'; } else { res = 'OPEN'; } return res; } } @Pipe({ name: 'eqtAlarm' }) export class EqtAlarmPipe implements PipeTransform { transform(value: string): string { let res: string; if (value === 'CF') { res = 'Constant Fault(Hardware Failure)'; } else if (value === 'IF') { res = 'Intermittent Fault'; } else { res = value; } return res; } }
2.piple.module.ts
import { NgModule } from '@angular/core';
import { AlarmPipePipe, EqtAlarmPipe} from 'app/alarm-management/alarm-pipe.pipe';
const PIPES = [AlarmPipePipe, EqtAlarmPipe];
@NgModule({
declarations: PIPES,
exports: PIPES
})
export class AlarmPipesModule {}
3.在需要使用的元件對應的module中引入
// example.module.ts import { NgModule } from '@angular/core'; import { NgZorroAntdModule } from 'ng-zorro-antd'; import { MaterialModule } from 'app/shared/material/material.module'; import { FormsModule } from '@angular/forms'; import { SharedModule } from 'app/shared'; import { TranslateModule } from '@ngx-translate/core'; import { AlarmPipesModule } from 'app/alarm-management/alarm-pipes.module'; import { EquipmentAlarmDetailsComponent } from 'app/alarm-management/equipment-alarm-details/equipment-alarm-details.component'; const COMPONENTS = [EquipmentAlarmDetailsComponent]; @NgModule({ imports: [NgZorroAntdModule, MaterialModule, FormsModule, SharedModule, TranslateModule, AlarmPipesModule], declarations: COMPONENTS, exports: COMPONENTS }) export class EqtAlarmDetailsModule {}
4.模板中使用
<span>{{detailItem?.alarmType | eqtAlarm}}</span>
<span>{{detailItem?.isGenuine | alarmPipe | titlecase}}</span>