Angular 18中可用的this元素内部引用为何在Angular 19中失效？

问题场景 #

组件模板代码如下：

<span *ngFor="let date of dateArray">
  <button
    type="button"
    class="btn btn-outline-primary fs-6 mt-1 me-1"
    [attr.data-date]="date"
    [disabled]="isSaving"
    (click)="removeDate(this.date)">
    {{ date }}
    <i class="bi bi-x" [attr.aria-label]="'Delete ' + date"></i>
  </button>
</span>

升级至Angular 19后构建时报错：

Error: src/app/views/.../my.component.html:46:36 - error TS2339: Property 'date' does not exist on type 'AbcComponent'.

46           (click)="removeDate(this.date)">
                                      ~~~~

该组件本身无date属性，Angular 18中this.date可获取按钮data-date属性的值，但直接使用removeDate(date)在Angular 18中也能正常运行。

问题解答 #

这是Angular团队的bug修复，并非特性移除。

Angular模板的设计规范里，事件绑定表达式中的this原本就应该指向组件实例，而非DOM元素。Angular 18及更早版本中this指向DOM元素属于不符合预期的错误行为，Angular 19修复了这个问题，让this回归到正确的组件上下文。

至于removeDate(date)能一直正常运行，是因为在*ngFor的循环作用域中，date就是当前迭代的变量，直接引用就能拿到对应的值，完全不需要通过this或DOM属性间接获取。之前用this.date能工作纯粹是依赖了旧版本的bug，修复后自然会因为组件实例无date属性而报错。

内容的提问来源于stack exchange，提问作者Green Grasso Holm