可以理解為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; 
  }
}

界面輸出：

拋出錯誤

正常顯示