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

时间:2016-08-17 22:18:54

标签: angular angular2-forms angular2-pipe

我似乎无法解决此错误。我有一个搜索栏和一个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"

10 个答案:

答案 0 :(得分:118)

确保您没有面对 a&#34;交叉模块&#34;问题

如果使用管道的组件不属于已声明管道组件&#34;全局&#34;然后找不到管道,你收到此错误信息。

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

我宣布了一个 您使用管道的组件是

管道模块

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

答案 1 :(得分:49)

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

declarations: [ UsersPipe ],
providers: [UsersPipe]

答案 2 :(得分:12)

我找到了&#34;交叉模块&#34;回答上面对我的情况很有帮助,但是想要扩展一下,因为还有另外一个需要考虑的问题。如果你有一个子模块,它也无法在我的测试中看到父模块中的管道。出于这个原因,您可能需要将管道放入自己独立的模块中。

这里是我为解决子模块中不可见的管道所采取的步骤的摘要:

  1. 从(父)SharedModule中取出管道并放入PipeModule
  2. 在SharedModule中,导入PipeModule并导出(对于依赖于SharedModule 的app 的其他部分,以自动获取对PipeModule的访问权限)
  3. 对于Sub-SharedModule,导入PipeModule,以便它可以获得对PipeModule的访问权限,而不必重新导入会导致循环依赖性问题的SharedModule,以及其他问题。
  4. 上述&#34;交叉模块的另一个脚注&#34;回答:当我创建PipeModule时,我删除了forRoot静态方法,并在我的共享模块中导入了没有它的PipeModule。我的基本理解是forRoot对单身人士这样的场景非常有用,这些场景不一定适用于过滤器。

答案 3 :(得分:9)

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

  1. 使用以下文件创建管道目录: pipes.ts pipes.module.ts
  2. // 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 {}
    
    1. 将PipesModule包含到app.module和@NgModule导入部分

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

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

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

    3. 多数民众赞成。现在,您可以在模板中使用自定义管道。实施例

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

答案 4 :(得分:0)

注意:仅当您不使用角度模块

由于某些原因,这不在文档中,但我必须在组件中导入自定义管道

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

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

答案 5 :(得分:0)

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.

答案 6 :(得分:0)

在这里建议替代答案:

不需要为管道单独创建一个模块 ,但这绝对是一种替代选择。查看官方文档脚注:https://angular.io/guide/pipes#custom-pipes

  

您使用自定义管道的方式与使用内置管道的方式相同。
  您必须将管道包含在AppModule的声明数组中。   如果选择将管道注入到类中,则必须在NgModule的providers数组中提供它。

您要做的就是将管道添加到 declarations 数组中,并在要使用管道的sqrt中添加 providers 数组。

module

答案 7 :(得分:0)

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

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

答案 8 :(得分:0)

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

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 是在 Pipe 装饰器中声明的名称

答案 9 :(得分:-1)

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

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

现在可以通过在嵌套模块中导入它来使用它