pipe道''无法findangular2自定义pipe道

我似乎无法解决这个错误。 我有一个search栏和一个ngFor。 我想用这样的自定义pipe道过滤数组:

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版本:

 "@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" 

确保你没有面临“交叉模块”的问题

如果使用pipe道的组件不属于声明了pipe道组件“全局”的模块,则pipe道未find,并且您收到此错误消息。

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

我已经声明,你正在使用该pipe道的组件

pipe道模块

  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() .... ], 

你需要在模块声明中包含你的pipe道:

 declarations: [ UsersPipe ], providers: [UsersPipe] 

我发现上面的“交叉模块”答案对我的情况非常有帮助,但是想要扩展这个答案,因为还有另一个需要考虑的问题。 如果你有一个子模块,它也不能在我的testing中看到父模块中的pipe道。 因为这个原因,你可能需要把pipe道放在那里拥有独立的模块。

以下是我在子模块中查看pipe道的步骤摘要:

  1. 从(父母)SharedModule中取出pipe道并放入PipeModule
  2. 在SharedModule中,导入PipeModule并导出(对于依赖于SharedModule的应用程序的其他部分来自动获取对PipeModule的访问)
  3. 对于Sub-SharedModule,导入PipeModule,因此它可以访问PipeModule,而不必重新导入将导致循环依赖性问题的SharedModule等等问题。

上述“交叉模块”的另一个脚注的答案是:当我创buildPipeModule时,我删除了forRoot静态方法,并在我的共享模块中没有导入PipeModule。 我的基本理解是,forRoot对于像singleton这样的场景很有用,它不一定适用于filter。

注意:只有在您不使用angular度模块的情况下

出于某种原因,这不是在文档中,但我不得不导入组件中的自定义pipe道

 import {UsersPipe} from './users-filter.pipe' @Component({ ... pipes: [UsersPipe] })