如何正确导入管离子4角7？

Question

我已生成我的自定义“completedOn”与离子CLI管：

ionic g pipe completedOn

并自动生成两个文件。首先是完成了，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;
  }
}

二是完成了，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>

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

我也试图通过创建新的文件主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 ([email protected])
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : not available

不能找到解决正确导入管，并使用它。有什么建议么？

Answer 1

WHE使用命令ionic g pipe completedOn它也将创建一个名为completedOn.module.ts模块创建的管道。您需要导入模块，以使用管道。

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