Angular 4模板“找不到管道”

Posted 2023-03-13

【中文标题】Angular 4模板“找不到管道”

【英文标题】：Angular 4 template "Pipe could not be found"

【发布时间】：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”

我错过了什么吗？

【问题讨论】：

一切正常，重启后看看

@Sajeetharan 我在模板中拼错了管道名称。我应该使用大写字母F，如qFormat

【参考方案1】：

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

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

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

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

声明：[myPipeExamplePipe] 数组和

导出：[myPipeExamplePipe] 数组

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

This question has multiple very helpful answers

【参考方案2】：

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

【参考方案3】：

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

<div>someProp | qFormat</div>

希望对您有所帮助！