Angular 4模板“找不到管道”答案

【问题标题】：Angular 4 template "Pipe could not be found"Angular 4模板“找不到管道”
【发布时间】：2017-12-08 13:00:07
【问题描述】：

我正在尝试在我的 Angular 4 项目中使用定制管道。无法弄清楚为什么编译器无法识别组件模板中的管道。

QFormat 管道

@Pipe({  name: 'qFormat'})
export class QFormatPipe implements PipeTransform {...}

共享模块

@NgModule({
    declarations: [QFormatPipe],
    exports: [QFormatPipe]
})
export class SharedModule { }

功能模块

@NgModule({
  imports: [SharedModule],
  declarations: [MyComponent]
})
export class FeatureModule{ }

MyComponent.html

<div>{{someProp | qformat}}</div>
                  ^^^^^^^

模板抛出错误：

Angular：找不到管道“qformat”

我错过了什么吗？

【问题讨论】：

标签： angular

【解决方案1】：

在我的情况下，问题是通过 CLI 生成是在 app.module.ts 内添加管道，但我正在使用的组件的模块不同。或者在您的情况下，它可能是您正在使用的模块中未注册管道/错误注册管道。

所以一个快速的解决方案是：

删除您创建的管道（不要忘记将其从 app.module.ts）。然后创建一个类似管道的文件夹：然后生成一个像 'ng g module pipelines/pipes-common' 这样的模块

然后生成像 'ng g pipe myPipeExample` 这样的管道，现在不要忘记添加它

声明：[myPipeExamplePipe] 数组和

导出：[myPipeExamplePipe] 数组

现在将此模块导入您希望它工作的模块中。

【讨论】：

【解决方案2】：

我的就像忘记将它注册到我的@NgModule 一样简单

【讨论】：

【解决方案3】：

它找不到管道的原因是因为您将管道注册为带有大写 F 的“qFormat”，但在 HTML 中您有带有小写 f 的“qformat”。这就是发生错误的原因。您的共享模块注册和导入/导出完全正确。 HTML 应该是：

<div>{{someProp | qFormat}}</div>

希望对您有所帮助！

【讨论】：