代码之家 › 专栏 › 技术社区 › Christallkeks

子零部件中未使用替代的角管

angular-pipe overriding angular

Christallkeks · 技术社区 · 7 年前

我正在覆盖Angular的内置 date 管道应包括更好的i18n,用于日期。我在一个“工具箱”项目中实现了该管道,该项目后来作为依赖项包含在主项目中。我将新管道包装在一个模块中:

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

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

但它在子组件中不起作用,即在所列GraphLegendComponent的子组件的模板中使用的日期管道不会像在TimeComponent中使用的那样更改。

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

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

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

1 回复 | 直到 7 年前

Chrillewoodz 7 年前

其实很简单,问题是您没有导入 PipesModule 进入所有模块。只是将其导入到 AppModule 不允许功能模块访问的内容 管道模块 .

我建议创建 SharedModule 导入和导出的位置 管道模块 以及您需要共享的任何其他内容(不包括组件模块,因为它将创建循环依赖关系)。

为组件创建另一个 ComponentModule 以及导入和导出组件模块。

现在在功能模块中,只需导入 共享模块 和 ComponentsModule 你将可以访问任何地方的一切。

这是一个 共享模块 我正在使用:

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

和a 组件模块 :

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
    };
  }
}