Question

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

index.ts：

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

然而，我的目标是不必以这种方式将DecimalPipe添加到功能模块中，并且在MyCustomPipe和DecimalPipe之间存在依赖关系，以便使用MyCustomPipe的人可以担心导入MyCustomPipe来自SharedModule。我试图通过尝试遵循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％，如果这是正确的方法，因为我从未尝试共享使用内置角度管道与功能模块的自定义管道。

Answer 1

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

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

然后在使用它的功能模块中，只需将它们定义为declarations中@NgModule数组的一部分。如果在其他功能模块中的其他位置导入此功能模块应该识别在该新功能模块中使用的此特定管道，那么请提及此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
}

Answer 2

您应该在 declarations 下添加不在导入

下的管道

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

Answer 3

已更新

为了安全起见：在pipe-class中添加declarations，在pipe-module中添加imports

@NgModule({
  declarations: [
    CustomDatePipe
  ],
  imports: [
    CustomDateModule
  ]
})
export class AppModule { }

由模块导入的Angular＆＃39;意外管道＆＃39;错误

3 个答案:

已更新