最近在做一個app專案。使用了ionic3框架，中間要做一個輸入框輸入字元在一些已知的字元中篩選並高亮提示的搜尋功能，我選擇使用過濾的方法來實現，在angular4-ionic3中也叫管道。

在專案中建立管道命令列：ionic g pipe wordPlace

建立完成後，會生成如下檔案目錄：

我所需要的功能只需要在word-place.ts中寫入程式碼就可以了，然後在app.module.ts中匯入，注意在imports中新增：

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

// pages
import { AboutPage } from '../pages/about/about';

/* pipes */
import { PipesModule } from '../pipes/pipes.module';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    PipesModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
 

然後在page中使用就可以了，然後使用的時候一直報錯提示管道找不到，接下來就是要注意的一點坑了：

我們看看word-place.ts這個檔案中：

要注意class宣告的類名和name後面的不一樣

注意！！！注意！！！注意！！！在page頁面的html檔案中使用的時候一定要使用的是word-place.ts中命名的name後面那個，而不是class宣告的類名。

報錯：

正確：

在這裡報錯找了半天原來是這個原因！！！希望各位不要遇到這樣的坑！！