如何在 Angular 4/Ionic 的组件中正确导入管道模块？答案

【问题标题】：How can I properly import a Pipe Module in my Component in Angular 4/Ionic?如何在 Angular 4/Ionic 的组件中正确导入管道模块？
【发布时间】：2018-04-06 05:09:18
【问题描述】：

所以我收到了这个错误：

Template parse errors: The pipe 'orderByDateSubmitted' could not be found.

我的任何代码都是这样的：

首先，我创建了一个管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderByDateSubmitted'
})

export class OrderByDateSubmittedPipe implements PipeTransform {

  transform(array: Array<any>, args: string): Array<any> {
    //sort code
  }
}

然后我为此创建了一个模块：

import { NgModule } from '@angular/core';
import { CommonModule } from "@angular/common";
import { OrderByDateSubmittedPipe } from './order-by-date-submitted';

@NgModule({
  imports: [CommonModule],
  declarations: [OrderByDateSubmittedPipe],
  exports: [OrderByDateSubmittedPipe],
})

export class OrderByDateSubmittedPipeModule {}

在我的应用模块中

import { OrderByDateSubmittedPipe } from './../pipes/order-by-date-submitted/order-by-date-submitted';
import { OrderByDateSubmittedPipeModule } from './../pipes/order-by-date-submitted/order-by-date-submitted.module';

@NgModule({
  declarations: [MyApp...],
  imports: [...
    OrderByDateSubmittedPipeModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [...],
  providers: [...]
})
export class AppModule {}

我在我的一个组件中使用它，如下所示：

*ngFor="let r of reports | orderByDateSubmitted: '-date_submitted'"

但我得到了那个错误。我真的正确地导入了模块吗？还是我错过了什么？任何帮助将不胜感激。

【问题讨论】：

你使用管道的组件是AppModule的一部分？
@GünterZöchbauer 是的，它在 imports 和 entryComponents 数组中
组件不应该在imports 数组中。它应该在declarations 数组中。 entryComponents 仅在动态添加组件时才需要（如 ViewContainerRef.createComponent()）

标签： javascript angular angular-directive angular-pipe

【解决方案1】：

过去几个小时我一直坚持这个，不明白为什么我的管道在一个项目中工作，但是当我将代码移到一个新项目时它没有工作。

不断收到关于找不到“name_of_my_pipe”的错误

我终于意识到我的 app.module.ts 将我的“主页”两次声明/导出为“MyApp”和“ListPage”（我是一个完全的新手，基本上是从一些示例代码中拼凑出一些东西，看起来当我使用 ionic CLI（它已经是应用程序中的主页）创建页面“ListPage”时，它自动添加了正常页面代码和对 app.module.ts 的引用）

这里是我原来的 app.module.ts

import { MyApp } from './app.component';
import { ListPage } from '../pages/list/list';
import { InfoPage } from '../pages/info/info';
import { MyService } from '../services/rest/service';

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

一旦我删除了对 ListPage 的引用（记住这已经是我在 app.component.ts 中声明的应用主页了

我的自定义管道现在已被识别

import { MyApp } from './app.component';
import { InfoPage } from '../pages/info/info';
import { MyService } from '../services/rest/service';

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

【讨论】：

【解决方案2】：

当您在组件中使用pipe 时，您还必须将pipemodule 导入到您的组件级模块中。不仅在App.module.ts.

|-->App.module.ts (App main component module)
|-->pipes.module.ts (Pipe component module)
|-->Newpage 
      |-->Newpage.module.ts (NewPage component module) <--//Import the pipe module here

参考thisAnswer。

【讨论】：

【解决方案3】：

您不需要为管道创建模块。只需在 AppModule 的“声明”中导入即可。

【讨论】：

您需要导入管道，而不是声明中的模块。
是的，这就是我这样做的原因。
由模块“AppModule”导入的意外管道“OrderByDateSubmittedPipe”。请添加@NgModule 注释。

【解决方案4】：

我正在使用 Ionic 4，并使用 ionicCLI 命令生成了我的管道

ionic g pipe my-pipe

这在声明中添加了我的新管道的导入行，但没有在导出中添加。

这也是我的错误。

【讨论】：