Angular 2-本地导入管道 [英] Angular 2 - Import pipe locally

问题描述

情况：

我只需要在一个组件中使用管道。由于这个原因，我不想将其导入全局，而只想在组件中导入。

I need to use a pipe in only one component. For this reason i didn't wanted to import it globally but only in the component.

我试图寻找有关如何做的参考，但找不到。

I have tried looking for reference on how to do it but couldn't find it.

这是我的尝试：

管道：

在全局测试时可以正常工作

when tested globally is working fine

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

问题：

您知道我做错了还是想念什么吗？

Do you know what I am doing wrong or if I am missing something?

谢谢！

推荐答案

您声明了两个 NgModules ，并且您的管道仅在第二个模块中声明。 但是，您的组件已声明到第一个模块中。这就是为什么它找不到您的管道。

You declared two NgModules and your pipe was only declared in the second module. BUT your component was declared into the first module. That's why it couldn't find your pipe.

这里是您的Plunkr的更新版本（工作版本）：
https://plnkr.co/edit/P3PmghXAbH6Q2nZh2CXK?p=preview

Here's an updated (and working version) of your Plunkr : https://plnkr.co/edit/P3PmghXAbH6Q2nZh2CXK?p=preview

编辑1：比较

这是您之前的内容（删除了不相关的代码）：

Here's what you had before (with non relevant code removed) :

@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个NgModule。一个，删除另一个，然后将管道添加到声明。

Notice that you have 2 NgModules. I used only one, removed the other and I added the pipe into declarations.

这篇关于Angular 2-本地导入管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！