Angular中如何在EventListener函数内获取DOM的input字段值

下面是三种常用的实现方式，根据你的场景选择即可：

方案1：模板引用变量（快速实现） #

直接在输入框上添加模板引用，点击按钮时传入值：
模板代码：

<input type="text" #promptInput>
<button (click)="handleSubmit(promptInput.value)">提交</button>

组件类代码：

async handleSubmit(inputValue: string) {
  // 直接使用传入的inputValue调用异步函数
  await this.yourAsyncFunction(inputValue);
}

方案2：模板驱动表单 #

通过双向绑定ngModel绑定组件类变量：

1. 先在组件所属模块的imports数组中添加FormsModule
2. 模板代码：

<input type="text" [(ngModel)]="promptText" name="prompt">
<button (click)="handleSubmit()">提交</button>

3. 组件类代码：

promptText: string = '';

async handleSubmit() {
  // 使用this.promptText获取输入值
  await this.yourAsyncFunction(this.promptText);
}

方案3：响应式表单（推荐复杂场景） #

通过表单控件管理输入值，适合需要验证、动态修改的场景：

1. 在组件所属模块的imports数组中添加ReactiveFormsModule
2. 组件类代码：

import { FormControl } from '@angular/forms';

promptControl = new FormControl('');

async handleSubmit() {
  const inputValue = this.promptControl.value;
  if (inputValue) {
    await this.yourAsyncFunction(inputValue);
  }
}

3. 模板代码：

<input type="text" [formControl]="promptControl">
<button (click)="handleSubmit()">提交</button>

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