Angular：在 node_module 组件中覆盖 DatePipe

Question

问题：我的 angular 应用程序中有一个带有组件的外部库。 其中一些组件在内部使用 Angular DatePipe 以“shortDate”格式转换日期。 我真的没有选择使用任何其他组件或实现自定义组件，因为客户端需要使用该特定库。 但他们当然也不想要“shortDate”格式。

我尝试扩展内置的 Angular DatePipe。 如下：

import { DatePipe } from '@angular/common';
import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'date'
})
export class DateExtendedPipe extends DatePipe implements PipeTransform {

  static readonly DEFAULT_FORMAT = 'dd/MM/yyyy';
  
  constructor(@Inject(LOCALE_ID) locale: string) {
    super(locale)
  }

  transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
  transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
  transform(value: Date | string | number | null | undefined, format?: string, timezone?: string, locale?: string): string | null {
    console.log('date format');
    
    const ghibFormat = format && format !== 'shortDate' ? format : DateExtendedPipe.DEFAULT_FORMAT;
    return super.transform(value, ghibFormat, timezone, locale);
  }

}

这适用于我当前在我的应用程序中实现的任何自定义组件。 每当我使用'my_var | date' 它触发了我的扩展 pipe 而不是 Angular 的。

至于 node_modules 组件，它仍然触发默认的 Angular DatePipe 而不是我的扩展。 我认为这与构建 angular 架构和编译器首先编译 node_modules 的方式有关。 不完全确定。 只是想看看是否有人遇到过类似的问题，以及是否有任何神奇的解决方案。 谢谢！

Answer 1

您只需要设置正确的提供者：

  providers: [{
    provide: DatePipe,
    useClass: MyDatePipe
  }]

这将为所有想要 DatePipe 的人提供 MyDatePipe。

显然这已被弃用，现在您只需将其添加到您的 App 模块声明中。 查看答案覆盖 Angular 默认日期 pipe