Question

我已经使用离子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;
  }
}

第二个是 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>

未捕获（承诺）：错误：模板解析错误：找不到管道“ completedOn”

我还尝试通过创建新文件 main-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 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]
    })

如何正确导入离子4和角钢7中的管道？

1 个答案: