如何使用来自 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 }}

...但它不知道“DateTime”是什么。我可以通过将其更改为来解决此问题：

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

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

How to use an Angular pipe with complex parameters from the HTML template?

angular

luxon