Angular：在 node_module 组件中覆盖 DatePipe

Posted 2023-03-13

【中文标题】Angular：在 node_module 组件中覆盖 DatePipe

【英文标题】：Angular: Overriding DatePipe in node_module components

【发布时间】：2022-01-12 16:07:38

【问题描述】：

问题：我的 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' 它会触发我的扩展管道而不是 Angular 的。

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

【参考方案1】：

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

  providers: [
    provide: DatePipe,
    useClass: MyDatePipe
  ]

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

显然，这已被弃用，现在您只需将其添加到您的 App 模块声明中即可。见答案Override Angular default date pipe

【讨论】：

相同的行为。在我的应用程序中生成的组件中像魅力一样工作，但在来自 node_modules 库的组件中不起作用。

添加了我刚刚找到的新方法。