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

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

index.ts:

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

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

shared.module.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管道和功能模块的自定义管道。

最佳答案

您无需担心在应用程序中的其他位置使用/重复使用内置DecimalPipe以及使用它的customPipe时，可以将其导入/声明。仅声明customPipe。在自定义管道的定义中，只需像

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

然后在使用它的功能模块中，只需将它们定义为import中DecimalPipe数组的一部分。如果应该将此功能模块导入其他功能模块中的其他位置，以标识该新功能模块中正在使用的特定管道，请提及此customPipe，它也是早期功能模块(正在重用)的declarations数组声明的一部分。

@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 { }

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
}

关于javascript - Angular 'unexpected pipe imported by module'错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46280755/