无法找到管道 ' ' angular2 自定义管道 [英] The pipe ' ' could not be found angular2 custom pipe

问题描述

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

import { Pipe, PipeTransform } from '@angular/core';从'../user/user'导入{用户}；@管道({name: 'usersPipe',纯:假})导出类 UsersPipe 实现 PipeTransform {转换(用户:用户 []，searchTerm:字符串){返回 users.filter(user => user.name.indexOf(searchTerm) !== -1);}}

用法:

<div *ngFor="让用户 (users | usersPipe:searchTerm)">...

错误:

zone.js:478 未处理的承诺拒绝:模板解析错误:找不到管道usersPipe"(<div class="row">
]*ngFor="让用户 (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-b​​rowser": "2.0.0-rc.5","@angular/platform-b​​rowser-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",反射元数据":0.1.3"，"rxjs": "5.0.0-beta.6","systemjs": "0.19.26","引导程序": "^3.3.6",zone.js":^0.6.12"

解决方案

确保您没有面临跨模块"问题

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

在我的例子中，我在一个单独的模块中声明了管道，并将这个管道模块导入到任何其他具有使用管道组件的模块中.

我已经声明了一个您在其中使用管道的组件是

管道模块

 import { NgModule } from '@angular/core';从 '../directives/myDateFormat' 导入 { myDateFormat };@NgModule({进口:[]，声明:[myDateFormat]，出口:[myDateFormat]，})导出类 PipeModule {静态 forRoot() {返回 {ngModule:管道模块，提供者:[]，};}}

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

//导入应用模块...从 './tools/PipeModule' 导入 { PipeModule };@NgModule({进口:[..., PipeModule.forRoot()....],

I can't seem to fix this error. I have a search bar and an ngFor. I am trying to filter the array using a custom pipe like this:

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

Usage:

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

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

Error:

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 versions:

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

解决方案

Make sure you are not facing a "cross module" problem

If the component which is using the pipe, doesn't belong to the module which has declared the pipe component "globally" then the pipe is not found and you get this error message.

In my case I've declared the pipe in a separate module and imported this pipe module in any other module having components using the pipe.

I have declared a that the component in which you are using the pipe is

the Pipe Module

 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: [],
      };
   }
 } 

Usage in another module (e.g. app.module)

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

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

这篇关于无法找到管道 ' ' angular2 自定义管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！