angular pipe 自定义管道

可以理解为angular中的管道（pipe）与angular1.x的过滤器（filter）一样。

那么我们就来自定义一个管道。
新建管道

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'dataUnit' })
export class DataUnitPipe implements PipeTransform {
  transform(value: string): string {
    if(!value) {
      throw new Error('格式错误');
    }
    return value + `个`;
  }
} 

在pipe.module中声明这个管道

import { NgModule } from '@angular/core';
import { DataUnitPipe } from './pipe/dataUnit.pipe'

 @NgModule({
     imports:        [],
     declarations:   [DataUnitPipe],
     exports:        [DataUnitPipe],
 })

 export class PipeModule {
   static forRoot() {
      return {
          ngModule: PipeModule,
          providers: [],
      };
   }
 } 

在app,module中引用pipe.module

app.module

在component中使用自定义好的pipe
html

<div>
    <div>
        <input type="text" #inputNum>
    </div>
    <div>
        <button (click)="onClick(inputNum.value)">点击显示结果</button>
    </div>
    <div>{{ myInput | dataUnit }}</div>
 </div>

ts

import { Component } from '@angular/core';
@Component({
selector: 'pipe-app',
templateUrl: './pipe.component.html',
})
export class PipeAppComponent {
  myInput = 0;
  onClick (value){
      this.myInput = value; 
  }
}

界面输出：

抛出错误 正常显示