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道的步骤摘要:
- 从(父母)SharedModule中取出pipe道并放入PipeModule
- 在SharedModule中,导入PipeModule并导出(对于依赖于SharedModule的应用程序的其他部分来自动获取对PipeModule的访问)
- 对于Sub-SharedModule,导入PipeModule,因此它可以访问PipeModule,而不必重新导入将导致循环依赖性问题的SharedModule等等问题。
上述“交叉模块”的另一个脚注的答案是:当我创buildPipeModule时,我删除了forRoot静态方法,并在我的共享模块中没有导入PipeModule。 我的基本理解是,forRoot对于像singleton这样的场景很有用,它不一定适用于filter。
注意:只有在您不使用angular度模块的情况下
出于某种原因,这不是在文档中,但我不得不导入组件中的自定义pipe道
import {UsersPipe} from './users-filter.pipe' @Component({ ... pipes: [UsersPipe] })