Angular自定义管道

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>