如何在Angular HTML文件中执行JavaScript？解析日期报错解惑

为什么会报错？ #

Angular模板里的表达式上下文是组件实例，不是全局JavaScript环境。模板中的{{ }}只能访问组件类里定义的属性、方法，或者Angular提供的内置管道、指令，全局的Date对象不在这个上下文范围内，所以会触发Property 'Date' does not exist on type错误。

解决办法 #

方法1：把全局Date绑定到组件实例 #

在组件类中添加一个指向全局Date的属性，让模板能访问到：

// myComponent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my',
  templateUrl: './myComponent.component.html'
})
export class MyComponent {
  // 将全局Date挂载到组件实例上
  Date = Date;
}

模板里就能正常使用了：

<code>{{Date.parse("Thursday Sep 12 2022")}}</code>

方法2：组件类封装日期解析方法（更推荐） #

模板尽量少放业务逻辑，把日期解析逻辑封装到组件里，模板只负责调用展示：

// myComponent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my',
  templateUrl: './myComponent.component.html'
})
export class MyComponent {
  parseDateToTimestamp(dateStr: string): number {
    return Date.parse(dateStr);
  }
}

模板调用这个方法：

<code>{{parseDateToTimestamp("Thursday Sep 12 2022")}}</code>

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