angular - 如何在 ionic 4 和 angular 7 中正确导入管道？

Question

我已经使用 ionic CLI 生成了自定义的“completedOn”管道:

ionic g pipe completedOn

它自动生成了两个文件。首先是 completed-on.pipe.ts

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

@Pipe({
  name: 'completedOn'
})
export class CompletedOnPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    console.log(args);
    return value;
  }
}

第二个是completed-on.pipe.spec.ts

import { CompletedOnPipe } from './completed-on.pipe';

describe('CompletedOnPipe', () => {
  it('create an instance', () => {
    const pipe = new CompletedOnPipe();
    expect(pipe).toBeTruthy();
  });
});

和CompletedOnPipe被导入app.module.ts

@NgModule({
  declarations: [AppComponent, CompletedOnPipe],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, 
FormsModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: HTTP_INTERCEPTORS, useClass: UrlInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

但是，如果我尝试使用 completedOn 管道，则会出现此错误:

<ion-row *ngFor="let item of data | completedOn"></ion-row>

未捕获( promise ):错误:模板解析错误:找不到管道“completedOn”

我也尝试创建新文件 ma​​in-pipe.module.ts

import { NgModule } from '@angular/core';
import {CommonModule} from "@angular/common";
import {CompletedOnPipe} from "./completed-on.pipe";

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

export class MainPipe{}

如果我在 app.module.ts 中导入这个模块

@NgModule({
  declarations: [...],
  entryComponents: [],
  imports: [..., MainPipe],
  providers: [...],
  bootstrap: [AppComponent]
})

同样的错误。

这是我的 ionic 信息输出

Ionic:

   ionic (Ionic CLI)             : 4.9.0
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : not available

无法找到正确导入管道并使用它的解决方案。有什么建议吗？

Answer 1

当使用命令 ionic g pipe completedOn 创建管道时，它还会创建一个名为 completedOn.module.ts 的模块。您需要导入模块才能使用管道。

import {CompletedOnPipeModule} from "./completed-on.pipe.module";
    @NgModule({
      declarations: [...],
      entryComponents: [],
      imports: [..., CompletedOnPipeModule],
      providers: [...],
      bootstrap: [AppComponent]
    })