覆盖 Angular 管道未在子组件中使用

Question

我正在覆盖 Angular 的内置 date 管道以包含更好的日期 i18n。我在 "toolbox" 项目中实现了管道，该项目后来作为依赖项包含在主项目中。我将新管道包裹在一个模块中：

import { NgModule } from '@angular/core';
import { DateProxyPipe } from './dateproxy.pipe';

@NgModule({
    declarations: [
        DateProxyPipe
    ],
    exports: [
        DateProxyPipe
    ]
})
export class PipesModule { }

在主项目的 app.module.ts 中，我导入了该模块并将其设置在提供程序中：

import { PipesModule } from '../../../src/pipes/pipes.module';

@NgModule({
  imports: [
    ...
  ],
  entryComponents: [
    ...
  ],
  declarations: [
    AppComponent,
    GraphLegendComponent,
    TimeComponent,
    ...,
    DateProxyPipe
  ],
  providers: [
    DateProxyPipe,
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这在直接使用时效果很好，例如，当我更改语言时，我留在上面列表中的 TimeComponent 模板中的 {{selectedTimespan.from | date:'medium'}} 以不同的格式显示，就像我想要的那样。

但它在子组件中不起作用 - 即，在所列 GraphLegendComponent 的子组件模板中使用的日期管道不会像 TimeComponent 中的那样发生变化。

我尝试在各种位置声明、导入、提供 DateProxyPipe 等，但无法使其正常工作。我做错了什么？

编辑：其中一个子组件是 TimespanShiftSelectorComponent。这是它的模块：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

...
import { TimespanShiftSelectorComponent } from './timespan-shift-selector/timespan-shift-selector.component';

const COMPONENTS = [
  ...,
  TimespanShiftSelectorComponent
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ...
  ],
  declarations: [
    COMPONENTS,
  ],
  exports: [
    COMPONENTS
  ],
  providers: [
    ...
  ]
})
export class TimeModule {
}

Answer 1

其实很简单，问题是你没有将 PipesModule 导入到你的所有模块中。仅将其导入 AppModule 不允许功能模块访问 PipesModule 的内容。

我建议创建一个 SharedModule，您可以在其中导入和导出 PipesModule 以及您需要共享的任何其他内容（不包括组件模块，因为它会创建循环依赖）。

为组件创建另一个 ComponentModule 并导入和导出您的组件模块。

现在，在您的功能模块中，只需导入 SharedModule 和 ComponentsModule，您就可以随时随地访问所有内容。

这是我正在使用的 SharedModule 的示例：

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,

    // 3rd party
    DirectivesModule,
    LoadingBarHttpClientModule,
    PipesModule,
    TranslateModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,

    // 3rd party
    DirectivesModule,
    LoadingBarHttpClientModule,
    PipesModule,
    TranslateModule
  ]
})

export class SharedModule {}

还有一个ComponentsModule:

import {COMPONENTS} from '../components/components';
import {COMPONENTS_PROVIDERS} from '../components/providers';

@NgModule({
  imports: [
    COMPONENTS
  ],
  exports: [
    COMPONENTS
  ]
})

export class ComponentsModule {

  public static forRoot() {

    return {
      ngModule: ComponentsModule,
      providers: COMPONENTS_PROVIDERS
    };
  }
}

覆盖 Angular 管道未在子组件中使用

Overridden Angular pipe is not used in sub-component

angular

overriding

angular-pipe