Как правильно импортировать трубы в ионные 4 и угловые 7? - PullRequest
Новая
       23

Как правильно импортировать трубы в ионные 4 и угловые 7?

0 голосов
/ 04 февраля 2019

Я сгенерировал свой пользовательский канал 'completeOn' с ионным CLI: 

ionic g pipe completedOn

, и он автоматически сгенерировал два файла.Первый - complete-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;
  }
}

Второй - complete-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 {}

Однако, если я пытаюсь использовать канал completeOn, я получаю эту ошибку: 

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

Uncaught (в обещании): Ошибка: Ошибки синтаксического анализа шаблона: не удалось найти канал 'completeOn *

Я также пытался создатьновый файл 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]
})

, возникает та же ошибка.

Это моя ионная информация output 

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

Не удается найти решение для правильного импорта трубы и ее использования.Есть предложения?

1 Ответ

0 голосов
/ 04 февраля 2019

Когда создается канал с помощью команды ionic g pipe completedOn, он также создает модуль с именем completedOn.module.ts.Вам нужно импортировать модуль, чтобы использовать трубу. 

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