找不到带角度的自定义管道

我似乎无法修复这个错误。我有一个搜索栏和一个 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/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"
227189 次浏览
小开

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

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

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


@Component({
...
pipes:      [UsersPipe]
})
小开
最佳答案

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

如果使用管道的组件不属于声明管道组件为“全局”的模块，那么就找不到管道，并且您会得到这个错误消息。

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

我已宣布 使用管道的组件是

管道模组

 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. 将管道从(父) SharedModule 中取出并放入 PipeModule
  2. 在 SharedModule 中，导入 PipeModule 并导出(为应用程序 依赖于共享模块的其他部分自动获得对 PipeModule 的访问)
  3. 对于 sub-sharedModule，导入 PipeModule，这样它就可以访问 PipeModule，而不必重新导入 sharedModule，因为这会产生循环依赖问题，以及其他问题。

上述“交叉模块”答案的另一个脚注: 当我创建 PipeModule 时，我删除了 forRoot 静态方法并导入了 PipeModule，但在我的共享模块中没有这个方法。我的基本理解是 forRoot 对于像单例这样的场景非常有用，这些场景不一定适用于过滤器。

小开

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

declarations: [ UsersPipe ],
providers: [UsersPipe]
小开

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

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

现在可以通过在嵌套模块中导入相同的命令来使用它

小开

对于爱奥尼亚来说，你可以面对很多问题，就像@Karl 提到的那样。对加载离子懒惰页面完美无缺的解决方案是:

  1. 创建包含以下文件的管道目录: 烟斗和 管道，模块

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

//pipees.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. 在 app.module 和@NgModule 导入部分包含 Pipes Module

    导入{ PipeModule }从“ . ./tube/pipees.module”; @ NgModule ({ 进口: 管道模组 ] });

  2. 将管道模块包含在每个。其中您希望使用自定义管道。别忘了把它添加到导入部分。 //示例. file: pages/my-custom- page/my-custom- page. module.ts

    从“ . ./. ./tube/pipees.module”导入{ PipeModule } ; @ NgModule ({ 进口: 管道模组 ] })

  3. 就是这样。现在你可以在你的模板中使用你的自定义管道了。例如。

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

小开 
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.
小开

这里建议一个 另一种选择的答案:

为管道 是不需要的制作一个单独的模块，但绝对是一个替代方案。检查官方文件脚注: https://angular.io/guide/pipes#custom-pipes

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

您所需要做的就是将您的管道添加到 声明数组中，并将 供应商数组添加到您想要使用管道的 module中。

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

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

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

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

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>

//摘要是在管道装饰器中声明的名称

小开

我也遇到过同样的问题。

最初它是 a "cross module" problem，如所描述的 给你

但这还不是全部。

长时间运行的应用程序-应用程序无法解决这个新的进口管道。

我重新运行 ng serve命令 ——最后 cross module消失了


提交答案