Angular内置货币管道显示错误答案

【问题标题】：Angular built in currency pipe showing errorAngular内置货币管道显示错误
【发布时间】：2021-05-19 14:57:01
【问题描述】：

我有一个 Angular Ionic 项目。我在多个页面上使用货币管道，但在一个特定页面中它不起作用，下面是控制台错误。如果移除货币管道，一切正常！我该如何解决这个问题？

core.js:6210 错误错误：未捕获（承诺）：错误：NG0302：找不到管道“货币”！。更多信息请访问https://angular.io/errors/NG0302 错误：NG0302：找不到管道“货币”！。更多信息请访问https://angular.io/errors/NG0302

下面是page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/places/tabs/offers"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ place.title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
        <ion-card>
          <ion-card-header>
            <ion-card-title>{{ place.title }}</ion-card-title>
            <ion-card-subtitle>{{ place.price | currency }} / Night</ion-card-subtitle>
          </ion-card-header>
          <ion-img [src]="place.imageUrl"></ion-img>
          <ion-card-content>
            <p>{{ place.description }}</p>
          </ion-card-content>
          <div>
            <ion-button
              margin
              color="primary"
              [routerLink]="[
                '/',
                'places',
                'tabs',
                'offers',
                'edit',
                place.id,
                ]"
            >
            Edit</ion-button>
          </div>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

和模块.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { OfferBookingsPageRoutingModule } from './offer-bookings-routing.module';

import { OfferBookingsPage } from './offer-bookings.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    OfferBookingsPageRoutingModule
  ],
  declarations: [OfferBookingsPage]
})
export class OfferBookingsPageModule {}

【问题讨论】：

我认为你需要在你的模块中导入你的管道？

标签： angular ionic-framework angular-pipe

【解决方案1】：

在阅读了 Angular 流程的工作原理后，我发现了问题。

我已经在主页/模块中定义了 ion-tab 的路由，这有助于加载子模块。

我没有在我的路由中加载 offer-bookings.module，而是加载了 offer-bookings-routing.module，因此没有为 offer-bookings 页面加载任何 @NgModule 导入。

当路由指向 offer-bookings.module 时，一切正常。

您可以在这篇文章中阅读有关 Angular 流程的信息： https://medium.com/siam-vit/how-an-angular-app-work-behind-the-scenes-angular-flow-dcc4d1df27bd

感谢大家的帮助和网络上的优秀社区。社区万岁

【讨论】：

【解决方案2】：

我认为您需要在模块中导入管道：

在您的module.ts 中：

import { CurrencyPipe } from '@angular/common',

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    OfferBookingsPageRoutingModule,
    CurrencyPipe
  ],
  declarations: [OfferBookingsPage],
  providers: []
})
export class OfferBookingsPageModule {}

我们必须声明它们 - 不要提供它们:)

【讨论】：