【问题标题】：How to use document.getElementById in inline click event binding?如何在内联点击事件绑定中使用 document.getElementById？
【发布时间】：2021-12-15 00:05:56
【问题描述】：

以下代码无法被 VS Code 解析。

解析器错误：缺少预期的 ) 在第 34 列 [(document.getElementById('btnA') as HTMLInputElement).disabled=true] 在

<button id="btnA">A</button>
<button (click)="(document.getElementById('btnA') as HTMLInputElement).disabled=true">Disable A</button>

或

<button id="btnA">A</button>
<button (click)="<HTMLInputElement>document.getElementById('btnA').disabled=true">Disable A</button>

如何在内联点击事件绑定g中使用document.getElementById()？

编辑 1：

我想使用事件绑定而不是onclick。

编辑 2：

实际上我想模仿下面的工作代码，但使用getElementById()。

<button #btnA>A</button>
<button (click)="btnA.disabled=true">Disable A</button>

【问题讨论】：

首先，您应该删除“（”。注意：是的，“角度方式”是使用变量
Yes. I did but I want to know how to make it with getElementById -> 为什么？ Angular 公开了许多好的方法来操作 DOM，而使用 javascript 来做这件事是一种不好的做法，因为你正在退出 Angular 本身的范围。

标签： javascript angular

【解决方案1】：

<button id="btnA">A</button>
<button onClick="() =>{<HTMLInputElement>document.getElementById('btnA').disabled=false"}>Disable A</button>

【讨论】：

对不起。我想使用事件绑定。
AFAIK 这是事件绑定：What does event binding even mean?;也许OP意味着使用DOM elements' addEventListener`
Angular 中的事件绑定（和其他绑定）：angular.io/guide/binding-syntax

【解决方案2】：

您可以使用模板引用，它将是对 HTML 元素的引用

<button #btnA>A</button>
<button (click)="btnA.disabled=true">Disable A</button>

【讨论】：

可能是因为组件没有console 属性。尝试在组件中添加public console = console