Angular 18.1模板用@let创建Date实例报错的解决方法

在Angular 18.1模板中直接使用@let formattedDate = new Date(ISODateString);会触发如下错误：

Parser Error: Unexpected token 'Date' at column 5 in [new Date(ISODateString)]

这是因为Angular模板表达式的安全限制，不允许直接使用new操作符实例化对象。以下是两种可行的解决方式：

方法一：通过组件类方法创建Date实例 #

1. 在组件类中定义一个用于创建Date的方法：

createDate(isoString: string): Date {
  return new Date(isoString);
}

2. 在模板中通过@let调用该方法：

@let formattedDate = createDate(ISODateString);

方法二：使用自定义管道转换为Date实例 #

1. 创建一个自定义管道，用于将ISO日期字符串转换为Date对象：

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

@Pipe({ name: 'toDate', standalone: true })
export class ToDatePipe implements PipeTransform {
  transform(value: string): Date {
    return new Date(value);
  }
}

2. 在模板中引入该管道后，通过管道语法转换并赋值给@let变量：

@let formattedDate = ISODateString | toDate;

内容的提问来源于stack exchange，提问作者tlt