ionic3自定义管道

1、ionic start demo tabs,创建项目
2、ionic g pipe change-text, 创建一个管道，创建成功后目录中会多一个pipe目录,如图:

3、我们做一个改变字符串的管道，相当于ng1中的过滤,需要在app.module.ts中引入:
app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { Test1Page } from '../pages/test1/test1';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { PipesModule } from '../pipes/pipes.module';//自定义管道

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    Test1Page,
  ],
  imports: [
    PipesModule, //自定义的管道
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    Test1Page,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
})
export class AppModule {}

在pipe/change-text/change-text.ts中：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'changeText',
})
export class ChangeTextPipe implements PipeTransform {
  transform(value: string, ...args) {
    if(value){
      let str = value + 'string';
      return str;
    }
  }
}

我们选择在about页面中试用:
about.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div class="normal-page">
    <div change-color='blue' *change-dom='true'>自定义指令</div>

    <div>{{text | changeText}}</div> <!--自定义的管道-->
  </div>
</ion-content>

ionic serve重启服务