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

Question

所以我得到这个错误:

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'"

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

Answer 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 {}