javascript - Angular 'unexpected pipe imported by module' 错误

Question

我创建了一个使用 DecimalPipe transform() 方法的自定义管道。我在其中一个功能模块中使用此管道，我必须将这两个管道添加到 providers: [](因为 MyCustomPipe 使用 DecimalPipe)，如下所示:

索引.ts:

@NgModule({
    imports: [
        MaterialModule,
        SharedModule
    ],
    declarations: [
        ...
    ],
    providers: [
        DecimalPipe,
        MyCustomPipe
    ...

然而，我的目标是不必以这种方式将 DecimalPipe 添加到功能模块，并且“隐藏”MyCustomPipe 和 DecimalPipe 之间的依赖关系，这样使用 MyCustomPipe 的人就可以只担心从 SharedModule 导入 MyCustomPipe。我试图通过尝试遵循 SharedModule 模式并从 SharedModule 导出 DecimalPipe(就像我对 MyCustomPipe 所做的那样)来解决这个问题，如下所示:

共享模块.ts:

...import { DecimalPipe } from '@angular/common';

...export * from '../pipes/index';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HttpModule,
        DecimalPipe
    ],
    declarations: [
        LoginComponent,
        ErrorComponent,
        MyCustomPipe,
    ],
    exports: [
        CommonModule,
        HttpModule,
        LoginComponent,
        ErrorComponent,
        DecimalPipe,
        MyCustomPipe
    ]
})

但是，当我尝试这样做时，出现错误 "Error: (SystemJS) Unexpected pipe 'DecimalPipe' imported by the module 'SharedModule'. Please add a @NgModule annotation." 。现在，我可以将 DecimalPipe 添加到 SharedModule 中的 declarations: []，但随后我收到错误警告我在 SharedModule 和 CommonModule 中都声明了 DecimalPipe。我认为这源于我对文档中描述的 SharedModule 模式缺乏理解。如果这甚至是正确的方法，我也不是 100%，因为我从未尝试过共享一个自定义管道，该管道使用带有功能模块的内置 Angular 管道。

Answer 1

当您在应用程序的其他地方使用/重用它时，您不必担心导入/声明内置的 DecimalPipe 以及使用它的自定义管道。只需声明 customPipe 即可。在您的自定义管道定义中，只需导入 DecimalPipe 即可

import { DecimalPipe } from '@angular/common';

然后在使用它的功能模块中将它们定义为 @NgModule 中的 declarations 数组的一部分。如果在其他功能模块的其他地方导入此功能模块应该识别在该新功能模块中使用的此特定管道，则将此 customPipe 也提及为早期功能模块的 exports 数组声明的一部分(即正在重复使用)。

@NgModule({
  imports: [
    CommonModule,
    ...
  ],
  declarations: [
    CustomPipe
  ],
  exports: [
    CustomPipe // <-- do this only if you need this pipe to be available external to this ReusedFeatureModule when this module is 'imported' to other feature modules
  ]
})
export class ReusedFeatureModule { }

CustomPipe

import { Pipe, PipeTransform } from '@angular/core';
import { DecimalPipe } from '@angular/common';

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
 ...
 private originalDecimalPipe: DecimalPipe; // this variable will have  the inbuilt DecimalPipe inside the constructor body
 constructor () {
  this.originalDecimalPipe = new DecimalPipe('en-US'); // pass the current locale as the argument
 }
 transform(value: any): any { return <transformed-value>;} // implement your transform
}