如何使用来自 HTML 模板的复杂参数的 Angular 管道？

Question

我正在制作一个国际化的 Angular 应用程序，因此我为我的 MatDatepickers 实现了MatLuxonDateModule，它运行良好。但我也想在格式化日期时使用 Luxon 管道而不是内置日期管道，以便它在所有浏览器和文化中始终如一地工作。

我做了一个很好用的：

import { Pipe, PipeTransform } from '@angular/core';
import { DateTime, DateTimeFormatOptions } from 'luxon';

@Pipe({
  name: 'dateFormat',
})
export class LuxonDatePipe implements PipeTransform {
  transform(value: DateTime | Date, format: DateTimeFormatOptions = DateTime.DATE_SHORT): any {
    let dateTimeToUse: DateTime;
    if (value instanceof Date) {
      dateTimeToUse = DateTime.fromJSDate(value);
    } else {
      dateTimeToUse = value;
    }

    return dateTimeToUse.toLocaleString(format);
  }
}

现在我想在 HTML 模板中使用它，像这样：

{{ testDate | dateFormat: DateTime.DATE_MED_WITH_WEEKDAY }}

...但它不知道“日期时间”是什么。我可以通过将其更改为来解决这个问题：

{{ testDate | dateFormat: formatToUse }}

...但是每次我需要格式化日期时，我都必须在 .ts 文件中声明这样的属性：

  formatToUse: DateTimeFormatOptions = DateTime.DATE_MED_WITH_WEEKDAY;

这真的很麻烦。 有没有办法在模板中“导入”Luxon，以便我可以即时引用 DateTime？

编辑：我想我可以将参数更改为字符串并向管道添加一个巨大的开关盒以映射到 Luxon 格式，但这似乎不太理想。

Answer 1

试试这个：

更换管道：

export class LuxonDatePipe implements PipeTransform {
  transform(value: DateTime | Date, format: string = 'DATE_SHORT'): any {
    let dateTimeToUse: DateTime;
    if (value instanceof Date) {
      dateTimeToUse = DateTime.fromJSDate(value);
    } else {
      dateTimeToUse = value;
    }

    return dateTimeToUse.toLocaleString((<any>DateTime)[format]);
  }
}

并像这样使用你的管道：

{{ testDate | dateFormat: 'DATE_MED_WITH_WEEKDAY' }}