Angular 4模板"无法找到管道"

Question

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

QFormat管道

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

SharedModule

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

FeatureModule

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

MyComponent.html

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

模板抛出错误:

Angular:无法找到管道'qformat'

我错过了什么吗？

Answer 1

在我的情况下,问题是通过CLI生成是在app.module中添加管道,但我正在使用的组件的模块是不同的.

所以快速解决方案是:

删除您创建的管道(不要忘记将其从app.module.ts中删除).然后创建一个像管道一样的文件夹:然后为它生成一个模块,如'ng g modules pipes/pipes-common'

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

声明:[myPipeExamplePipe]数组和

导出:[myPipeExamplePipe]数组

现在,在要使其运行的模块中导入此模块.

Answer 2

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

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

希望有帮助！