Угловое 2 - Импорт труб локально

Question

ПОЛОЖЕНИЕ:

мне нужно использовать трубу только в одном компоненте. По этой причине я не хотел импортировать его глобально, но только в компонент.

Я пробовал искать ссылку о том, как это сделать, но не смог найти.

Это моя попытка:

ТРУБУ:

при тестировании по всему миру работает отлично

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

@Pipe({name: 'keys'}) 
export class KeysPipe implements PipeTransform { 
    transform(value, args:string[]) : any 
    { 
     let keys = [];  
     for (let key in value) 
     { 
      keys.push({key: key, value: value[key]}); 
     } 
     return keys; 
    } 
} 

КОМПОНЕНТ:

import { Component, NgModule } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import {CommonModule} from "@angular/common"; 

import { KeysPipe } from './keys.pipe'; 


@Component({ 
    selector: 'page-attendees', 
    templateUrl: 'attendees.html' 
}) 

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

export class AttendeesPage { 

    public attendeeList = []; 
    public arrayOfKeys; 

    constructor(
     public navCtrl: NavController, 
     public navParams: NavParams 
    ) { 
     this.attendeeList = this.navParams.get('attendeeList'); 
     this.arrayOfKeys = Object.keys(this.attendeeList); 
    } 

    ionViewDidLoad() { 
     console.log('AttendeesPage'); 
    } 
} 

ОШИБКА:

Unhandled Promise rejection: Template parse errors: 
The pipe 'keys' could not be found 

PLUNKER:

https://plnkr.co/edit/YJUHmAkhAMNki2i6A9VY?p=preview

ВОПРОС:

Вы знаете, что я делаю ж Ронг или если я чего-то не хватает?

Спасибо!

Answer 1

Вы указали два NgModules, и ваша труба была объявлена ​​только во втором модуле. BUT ваш компонент был объявлен в первый модуль. Вот почему он не смог найти вашу трубку.

Вот обновленный (и рабочая версия) Вашего Plunkr: https://plnkr.co/edit/P3PmghXAbH6Q2nZh2CXK?p=preview

EDIT 1: Сравнение

Вот, что было раньше (с не соответствующим кодом удалены):

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

@Component({ 
    selector: 'my-app', 
    template: ` 
    <li *ngFor="let attendee of attendeeList | keys"> 
     {{ attendee.value.name }} 
    </li> 
    `, 
}) 
export class App { 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

И вот рабочая версия:

//our root app component 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <li *ngFor="let attendee of attendeeList | keys"> 
     {{ attendee.value.name }} 
    </li> 
    `, 
}) 
export class App { 
} 

@NgModule({ 
    imports: [ BrowserModule, CommonModule ], 
    declarations: [ App, KeysPipe ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Обратите внимание, что у вас есть 2 NgModules. Я использовал только один, удалил другой, и я добавил трубку в declarations.

Answer 2

Вы можете определить свою трубу в массиве providers в компоненте, чем объявить его в своем constructor и, наконец, использовать его в компоненте.

import { Component, NgModule } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import {CommonModule} from "@angular/common"; 

import { KeysPipe } from './keys.pipe'; 


@Component({ 
    selector: 'page-attendees', 
    templateUrl: 'attendees.html', 
    providers: [ KeysPipe ] 
}) 

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

export class AttendeesPage { 

    public attendeeList = []; 
    public arrayOfKeys; 

    keys; 

    constructor(
     public navCtrl: NavController, 
     public navParams: NavParams, 
     private keysPipe: KeysPipe 
    ) { 
     this.attendeeList = this.navParams.get('attendeeList'); 
     this.arrayOfKeys = Object.keys(this.attendeeList); 
     this.keys = this.keysPipe(this.arrayOfKeys, this.attendeeList) 
    } 

    ionViewDidLoad() { 
     console.log('AttendeesPage'); 
    } 
}