Angular - 在组件模板中声明变量

Question

我必须根据文本框中的值禁用/启用按钮。

这就是我目前的做法

<input [(ngModel)]="confirmationText" type='text'>
<button [disabled]="confirmationText != 'yes'">Delete</button>

问题:这可行，但我必须在我的 component.ts 文件中声明 confirmationText 并且我仅在模板中使用它，所以我正在寻找一种在组件模板中声明它的方法，以便我可以保持我的组件类干净。

Stackblitz

Answer 1

您可以使用 template reference variable实现你想要的。请注意，必须在输入元素上设置 ngModel 指令才能使其正常工作。

<input #textInput type="text" ngModel>
<button [disabled]="textInput.value !== 'yes'">Delete</button>

参见this stackblitz进行演示。