Angular 角度2-局部导入管道

情况：

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

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

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');
    }
}

我试着寻找如何做的参考资料，但找不到

这是我的尝试：

管道：

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

当在全球范围内进行测试时，系统运行良好

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:

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

问题：

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

你知道我做错了什么，或者我遗漏了什么吗

---

谢谢

您声明了两个

NgModules

，而您的管道仅在第二个模块中声明但是您的组件已声明到第一个模块中。这就是为什么它找不到你的烟斗

以下是您的Plunkr的更新（和工作版本）：

编辑1：比较

以下是您以前的情况（删除了不相关的代码）：

@NgModule({
声明：[KeysPipe]，
导入：[CommonModule]，
导出：[键管]
})
@组成部分({
选择器：“我的应用程序”，
模板：`

{{attendee.value.name}

`,
})
导出类应用程序{
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]
})
导出类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 {}

//我们的根应用程序组件
@组成部分({
选择器：“我的应用程序”，
模板：`

{{attendee.value.name}

`,
})
导出类应用程序{
}
@NGD模块({
导入：[BrowserModule，CommonModule]，
声明：[应用程序，密钥管道]，
引导：[应用程序]
})
导出类AppModule{}

---

请注意，您有两个模块。我只使用了一个，删除了另一个，并将管道添加到

声明中
您可以在组件中的
提供程序
数组中定义管道，然后在
构造函数中声明它，最后在组件中使用它

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');
    }
}

可能会在一个弹孔内繁殖。到目前为止，我没有看到任何奇怪的事情。好的，我已经把它添加到问题中了。谢谢你的回答。删除一个模块是什么意思。一个是通用的，我不能删除。。。另一个是“应该”允许我只在本地导入管道。顺便说一句，我很抱歉我的plunkr中有一个拼写错误。。我在我的和你的中都修复了它，所以现在在你的plunkr中我们可以正确地看到列表