找不到管道 ' ' 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 版本：

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

注意： 仅当您不使用 angular 模块时才如此

出于某种原因，这不在文档中，但我不得不在组件中导入自定义管道

import {UsersPipe} from './users-filter.pipe'

@Component({
    ...
    pipes:      [UsersPipe]
})

Answer 2

确保您没有面临一个"cross module"问题

如果正在使用管道的组件不属于已声明管道组件的模块"globally"，则找不到管道，您会收到此错误消息。

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

我已经声明了您使用管道的组件是

管道模块

 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 3

我发现上面的 "cross module" 答案对我的情况很有帮助，但我想对此进行扩展，因为还有另一个问题需要考虑。如果你有一个子模块，在我的测试中它也看不到父模块中的管道。同样出于这个原因，您可能需要将管道放入自己的单独模块中。

以下是我为解决管道在子模块中不可见所采取的步骤的摘要：

从（父）SharedModule 中取出管道并放入 PipeModule
在 SharedModule 中，导入 PipeModule 并导出（对于应用程序的其他部分依赖于 SharedModule 以自动获得对 PipeModule 的访问权限）
对于 Sub-SharedModule，导入 PipeModule，这样它就可以获得对 PipeModule 的访问权限，而不必重新导入 SharedModule，否则会产生循环依赖问题等问题。

上述 "cross module" 答案的另一个脚注：当我创建 PipeModule 时，我删除了 forRoot 静态方法并在我的共享模块中导入了没有它的 PipeModule。我的基本理解是 forRoot 对单例这样的场景很有用，不一定适用于过滤器。

Answer 4

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

declarations: [ UsersPipe ],
providers: [UsersPipe]

Answer 5

我在我的管道所在的同一目录中为管道创建了一个模块

import { NgModule } from '@angular/core';
///import pipe...
import { Base64ToImage, TruncateString} from './'  

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

    export class SharedPipeModule { }

现在在 app.module 中导入该模块：

import {SharedPipeModule} from './pipe/shared.pipe.module'
 @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

现在可以在嵌套模块中导入使用

Answer 6

对于 Ionic，您可能会面临@Karl 提到的多个问题。完美适用于离子惰性加载页面的解决方案是：

使用以下文件创建管道目录：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 {}

将 PipesModule 包含到 app.module 和 @NgModule 导入部分

import { PipesModule } from "../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] });
在每个要使用自定义管道的 .module.ts 中包含 PipesModule。不要忘记将它添加到导入部分。 // 例子。文件：pages/my-custom-page/my-custom-page.module.ts

import { PipesModule } from "../../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] })
就是这样。现在您可以在模板中使用自定义管道。例如

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

Answer 7

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

@Pipe({
  name: 'timePipe'
})
export class TimeValuePipe implements PipeTransform {

  transform(value: any, args?: any): any {
   var hoursMinutes = value.split(/[.:]/);
  var hours = parseInt(hoursMinutes[0], 10);
  var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
  console.log('hours ', hours);
  console.log('minutes ', minutes/60);
  return (hours + minutes / 60).toFixed(2);
  }
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  order = [
    {
      "order_status": "Still at Shop",
      "order_id": "0:02"
    },
    {
      "order_status": "On the way",
      "order_id": "02:29"
    },
    {
      "order_status": "Delivered",
      "order_id": "16:14"
    },
     {
      "order_status": "Delivered",
      "order_id": "07:30"
    }
  ]
}

Invoke this module in App.Module.ts file.

Answer 8

在此处建议备选答案：

不需要为 Pipe 创建一个单独的模块，但绝对是一种替代方法。查看官方文档脚注：https://angular.io/guide/pipes#custom-pipes

You use your custom pipe the same way you use built-in pipes.
You must include your pipe in the declarations array of the AppModule . If you choose to inject your pipe into a class, you must provide it in the providers array of your NgModule.

您所要做的就是将管道添加到 declarations 数组，并将 providers 数组添加到 module你想在哪里使用管道。

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

Answer 9

如果您在运行测试时看到此错误，请确保您已导入管道所属的模块，例如：

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [CustomPipeModule],
            declarations: [...],
            providers: [...],
            ...
        }).compileComponents();
    }));

Answer 10

自定义管道： 创建自定义管道时，必须在正在使用的模块和组件中注册。

export class SummaryPipe implements PipeTransform{
//Implementing transform

  transform(value: string, limit?: number): any { 
    if (!value) {
        return null;
    }
    else {
        let actualLimit=limit>0?limit:50
       return value.substr(0,actualLimit)+'...'
    } 
  }
}

添加管道装饰器

 @Pipe({
        name:'summary'
    })

并参考

import { SummaryPipe } from '../summary.pipe';` //**In Component and Module**

<div>
    **{{text | summary}}**  //Name should same as it is mentioned in the decorator.
</div>

//summary是管道装饰器中声明的名称

Answer 11

我遇到了同样的问题。

最初是 a "cross module" problem 描述

但这还不是全部。

运行应用了很长时间 - 应用无法识别这个新导入的管道。

I re-run ng serve 命令 - 最后 cross module 消失了

找不到管道 ' ' angular2 自定义管道

The pipe ' ' could not be found angular2 custom pipe

angular2-forms

angular2-pipe

angular