Angular自定义管道不起作用，显示“未找到管道”。

Question

我试图在我的Angular应用程序中创建一个自定义管道，但是一直收到“没有名为"currencyFormat"的管道”的错误消息。我使用Angular CLI创建了该管道：ng g pipe /components/pipes/currency-format，并且代码如下：

import { formatNumber } from '@angular/common';

@Pipe({
  name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {
  transform(value: any, currency: string): any {
    const currencySymbol = (currency == 'EUR' ? '€' : '$');
    let formattedValue = `${currencySymbol} ${formatNumber(value, 'be', '1.2-2')}`;
    return formattedValue;
  }

}

因为我使用了Angular CLI来创建管道，所以该管道会自动添加到app.module.ts的声明中。我试图在我的一个页面(home.page.html)中使用这个管道，但是仍然出现错误。迄今为止，我已经尝试了许多不同的方法，包括将管道放入单独的模块中并尝试导入该模块，但都没有成功。

有任何想法吗？

编辑：以下是我的app.module.ts，以防有用：

import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ComponentsModule } from 'src/app/components/components.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from 'ng2-charts';
import { environment } from "src/environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
import { ServiceWorkerModule } from '@angular/service-worker';
import { CurrencyFormatPipe } from './components/pipes/currency-format.pipe';

@NgModule({
  declarations: [AppComponent, CurrencyFormatPipe],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot({ animated: true, mode: 'ios' }), 
    AppRoutingModule, 
    ComponentsModule,
    BrowserAnimationsModule,
    ChartsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

- vdvaxel

---

你有home.module.ts文件吗？如果有，您是否将CurrencyFormatPipe添加到home.module.ts声明数组中？ - DJ House

嗨@DJHouse，如果我在两个地方都添加它，就会出现错误“管道'CurrencyFormatPipe'由多个NgModule声明。” - vdvaxel

啊，我知道什么会起作用。我会发布一个答案。 - DJ House

Answer 1

最好的解决方法是使用一个共享模块。这在Angular中是一种常见的模式。

给出一个示例文件夹/应用程序结构：

app
├── home
│   ├── home.component.ts
│   ├── home.module.ts
│   └── ...
├── shared
│   └── shared.module.ts
├── app.module.ts
└── ...

然后在你的shared.module中声明和导出组件、管道、指令、模块等，这些东西将被多个其他模块所需。

shared.module.ts

import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    /* declare it once, here */
    CurrencyFormatPipe
  ],
  exports: [
    /* then export it */
    CurrencyFormatPipe
  ]
})
export class SharedModule { }

你的其他模块只需导入你的shared.module，就可以使用shared module导出的任何内容。

app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    /* import your shared module here */
    SharedModule,

    IonicModule.forRoot({ animated: true, mode: 'ios' }), 
    AppRoutingModule, 
    ComponentsModule,
    BrowserAnimationsModule,
    ChartsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

然后您还可以将其导入到您的 home.module.ts 中。

@NgModule({
  declarations: [/* other imports */],
  entryComponents: [],
  imports: [
    /* import your shared module here, you will have access to the currency pipe now */
    SharedModule
  ],
})
export class AppModule {}

希望这能帮到您。这里是Angular文档，关于共享模块的内容。

- DJ House

Answer 2

如果您有多个模块，我认为您需要在一个辅助模块中声明该管道，而不是在AppModule中声明，并在其他模块（包括AppModule）中导入该模块以使用该管道。

我不确定为什么在AppModule中声明的管道不能被其他模块全局访问。这与Angular的延迟加载机制有些矛盾。

请尝试以下操作：

@NgModule({
    imports: [],
    declarations: [ CurrencyPipe ],
    exports: [ CurrencyPipe ]
})
export class ComponentsModule { }

@NgModule({
    imports: [ BrowserModule, HttpModule, FormsModule, ComponentsModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

当你需要在其他模块中使用管道时，你需要导入声明了该管道的模块（例如，在此示例中为ComponentModule）。

- ruth

---

这是一个重要提示 - 如果你要为一个库导出一个管道，仅仅导入管道是不够的，你需要导入整个库。 - Matt Saunders