管道''找不到angular2定制管道

Question

我似乎无法修复此错误.我有一个搜索栏和一个ngFor.我试图使用这样的自定义管道过滤数组:

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

import { User } from '../user/user';

@Pipe({
  name: 'usersPipe',
  pure: false
})
export class UsersPipe implements PipeTransform {
  transform(users: User [], searchTerm: string) {
    return users.filter(user => user.name.indexOf(searchTerm) !== -1);
  }
}

用法:

<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">

<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>

错误:

zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'usersPipe' could not be found ("
<div class="row">
    <div  
    [ERROR ->]*ngFor="let user of (user | usersPipe:searchTerm)">

角度版本:

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"bootstrap": "^3.3.6",
"zone.js": "^0.6.12"

Answer 1

确保您没有遇到"交叉模块"问题

如果使用管道的组件不属于已声明管道组件"全局"的模块,则找不到管道,并且您收到此错误消息.

在我的情况下,我已经将管道声明为一个单独的模块,并将此管道模块导入任何其他具有使用管道的组件的模块中.

我已经声明了你正在使用管道的组件

管道模块

 import { NgModule }      from '@angular/core';
 import { myDateFormat }          from '../directives/myDateFormat';

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

 export class PipeModule {

   static forRoot() {
      return {
          ngModule: PipeModule,
          providers: [],
      };
   }
 } 

在另一个模块中的用法(例如app.module)

  // Import APPLICATION MODULES
  ...
  import { PipeModule }    from './tools/PipeModule';

  @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

Answer 2

您需要在模块声明中包含管道:

declarations: [ UsersPipe ],
providers: [UsersPipe]

Answer 3

我发现上面的"交叉模块"答案对我的情况非常有帮助,但是我想扩展它,因为还有另外一个需要考虑的问题.如果你有一个子模块,它在我的测试中也看不到父模块中的管道.出于这个原因,您可能需要将管道放入自己独立的模块中.

以下是我用来解决子模块中不可见的管道的步骤摘要:

1. 从(父)SharedModule中取出管道并放入PipeModule
2. 在SharedModule中,导入PipeModule并导出(对于依赖于SharedModule的app的其他部分,以自动获取对PipeModule的访问权限)
3. 对于Sub-SharedModule,导入PipeModule,因此它可以获得对PipeModule的访问权限,而不必重新导入可能会产生循环依赖性问题的SharedModule,以及其他问题.

上面"交叉模块"的另一个脚注回答:当我创建PipeModule时,我删除了forRoot静态方法,并在我的共享模块中导入了没有它的PipeModule.我的基本理解是forRoot对于像单例这样的场景很有用,它们不一定适用于过滤器.

Answer 4

对于Ionic,你可以面对@Karl提到的多个问题.对离子延迟加载页面完美运行的解决方案是:

1. 使用以下文件创建管道目录:pipes.ts和pipes.module.ts

// pipes.ts内容(里面可以有多个管道,请记住

use @Pipe function before each class)
import { PipeTransform, Pipe } from "@angular/core";
@Pipe({ name: "toArray" })
export class toArrayPipe implements PipeTransform {
  transform(value, args: string[]): any {
    if (!value) return value;
    let keys = [];
    for (let key in value) {
      keys.push({ key: key, value: value[key] });
    }
    return keys;
  }
}

// pipes.module.ts内容

import { NgModule } from "@angular/core";
import { IonicModule } from "ionic-angular";
import { toArrayPipe } from "./pipes";

@NgModule({
  declarations: [toArrayPipe],
  imports: [IonicModule],
  exports: [toArrayPipe]
})
export class PipesModule {}

2. 将PipesModule包含到app.module和@NgModule进口部分

   import { PipesModule } from "../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] });

3. 在要使用自定义管道的每个.module.ts中包含PipesModule.不要忘记将其添加到导入部分.//示例 file:pages/my-custom-page/my-custom-page.module.ts

   import { PipesModule } from "../../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] })

4. 而已.现在,您可以在模板中使用自定义管道.防爆.

<div *ngFor="let prop of myObject | toArray">{{ prop.key }}</div>

Answer 5

在这里建议一个替代答案：

为管道制作一个单独的模块不是必需的，但绝对是一种替代方案。查看官方文档脚注：https://angular.io/guide/pipes#custom-pipes

您可以像使用内置管道一样使用自定义管道。
您必须将管道包含在 AppModule 的声明数组中。如果您选择将管道注入到类中，则必须在 NgModule 的providers 数组中提供它。

您所要做的就是将管道添加到声明数组中，并将提供者数组添加到module要使用管道的位置。

declarations: [
...
CustomPipe,
...
],
providers: [
...
CustomPipe,
...
]