管道即獲取數(shù)據(jù)輸入起暮，然后轉(zhuǎn)換他茫叭，根據(jù)自己的邏輯得到期望的輸出，和vue的過濾器類似吴侦，比如Date類型數(shù)據(jù)我們期望將他轉(zhuǎn)換成人類能一眼就看明白的日期屋休。
最近在開發(fā)過程中，遇到了一個很奇葩的問題备韧，我定義了一個管道劫樟，之前都是在頁面中引用，并且運(yùn)行良好织堂，后來我需要在組件中使用該管道叠艳，結(jié)果居然沒有任何效果...
一般定義管道過程
1.新建hello.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'helloPipe'
})
@Injectable()
export class HelloPipe implements PipeTransform {
transform(value: string) {
return "HELLO "+value.toUpperCase();
}
}
2.在app.module.ts(根模塊)中declarations聲明模塊內(nèi)部成員
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-borwser';
import {AppComponent} from './AppComponent';
import { HelloPipe } from "hello.pipe.ts";
@NgModule({
declarations: [HelloPipe],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule{}
3.在模板中引用pipe
<div>
<p>{{ 'superBinlin' | helloPipe }}</p> //output:HELLO SUPERBINLIN
</div>
在根模塊聲明的pipe在頁面中引用有效，而在頁面中引用的component中的模板則無效易阳，這也是令我困惑的地方...
尋求了一些解決方案附较，大多是要注意得在根模塊中聲明，于是我做了個嘗試潦俺，將組件也寫成一個功能模塊拒课，并在組件功能模塊中申明pipe，結(jié)果很欣喜事示，組件中的pipe生效了早像。
具體操作方法：
只需新建組件功能模塊，并在改模塊中申明pipe肖爵，myComponent.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { myComponent } from 'myComponent.ts';
import { HelloPipe } from "hello.pipe.ts";
@NgModule({
declarations: [
myComponent,
HelloPipe
],
imports: [
IonicPageModule.forChild(myComponent)
],
exports: [
myComponent
]
})
export class MyComponent {}
大功告成卢鹦，組件的模板引用pipe得以生效.
