2

情况：

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

我曾尝试寻找有关如何执行此操作的参考，但找不到。

这是我的尝试：

管道：

在全球测试时工作正常

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

在此处输入图像描述

柱塞：

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

问题：

你知道我做错了什么或者我错过了什么吗？

谢谢！

4

2 回答 2

7

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

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

编辑 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 个 NgModule。我只使用了一个，删除了另一个，然后将管道添加到declarations.

于 2016-12-05T15:47:00.497 回答
0

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');
    }
}
于 2018-02-22T15:39:08.863 回答