Question

我尝试了所有我看到的建议，但仍然遇到了令人恐惧的问题：Template parse errors: The pipe 'orderFilter' could not be found

在我的SharedModule.ts（导入MyComponent）中，我有：

import { OrderFilterPipe } from '../pipes/order-filter.pipe';

@NgModule({
...
declarations: [OrderFilterPipe];
...

管道代码（目前比较简单）：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'orderFilter'})
export class OrderFilterPipe implements PipeTransform {
  transform(item: any): any {
    return item.data;
  }
}

在MyComponent.html中，我有：

{{item | orderFilter}}

我有点茫然..除非我在Angular 5的实现中缺少某些东西。有什么想法吗？

Answer 1

当我以最小的复制方式从app.module的“声明”中删除管道时，会遇到相同的错误：https://stackblitz.com/edit/angular-wfi7v9

当我重新添加它时，中提琴！一切正常。这使我相信错误在于使用管道模块的模块中。您还记得将管道模块导入MyComponent所在的模块吗？

Answer 2

为管道尝试使用其他名称，不能将管道命名为“过滤器”。

Answer 3

[Ionic/ angular] 如果源具有每个页面特定的模具，则可能是解决方案有效。您必须将管道模块添加到每个页面特定模块中才能使其工作。

 import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 import { RegisterOnePage } from "./register-one";
 import { PipesModule } from '../../../pipes/pipes.module';

 @NgModule({
  declarations: [RegisterPage],
  imports: [
    IonicPageModule.forChild(RegisterPage),
    PipesModule
  ]
})
export class RegisterPageModule {}

Answer 4

当我们在共享模块文件中添加任何组件或指令时，在声明中添加该模块时，我们也需要添加到exports数组中。请参见下面的代码：

import { OrderFilterPipe } from '../pipes/order-filter.pipe';

@NgModule({
declarations: [OrderFilterPipe],
exports: [OrderFilterPipe]     // you need to add this line
})

Angular 5-自定义管道“无法找到”错误

4 个答案: