Angular开发：如何在onClick点击事件中将姓名字段传递给alert弹窗？

方案1：使用Angular双向绑定（更推荐，后续传后端更方便） #

第一步：在当前组件所属的模块中导入FormsModule #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 必须导入该依赖
import { EditProfileComponent } from './edit-profile.component';

@NgModule({
  declarations: [EditProfileComponent],
  imports: [BrowserModule, FormsModule], // 将FormsModule加入imports数组
  bootstrap: [EditProfileComponent]
})
export class AppModule { }

第二步：修改组件ts文件 #

import { IdToken } from '@azure/msal-common';
import { Component } from '@angular/core';

@Component({
  selector: 'edit-profile',
  templateUrl: './edit-profile.component.html',
  styleUrls: ['./edit-profile.component.scss']
})
export class EditProfileComponent implements OnInit {
  // 定义和表单字段对应的变量
  firstName: string = '';
  secondName: string = '';
  lastName: string = '';

  constructor() { }
  ngOnInit() {

  }
  onClick(e: Event){
    // 阻止form默认提交刷新页面的行为
    e.preventDefault();
    // 拼接内容弹出alert
    alert(`名字：${this.firstName}\n中间名：${this.secondName}\n姓氏：${this.lastName}`);
    // 后续传后端直接把这三个变量封装成请求体调用接口即可
  }
}

第三步：修改html模板，给input添加双向绑定 #

<div class="container">
  <h1>Update Account Info</h1>
  <form>
    <label for="firstName">First Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="firstName" [(ngModel)]="firstName" name="firstName">
    </div>
    <label for="secondName">Second Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="secondName" [(ngModel)]="secondName" name="secondName">
    </div>
    <label for="lastName">Last Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="lastName" [(ngModel)]="lastName" name="lastName">
    </div>
    <button (click)="onClick($event)" class="update-btn" id="update-btn">Update</button>
   </form>
 </div>

注意：Angular中使用ngModel必须搭配name属性使用

方案2：使用模板引用变量（无需修改模块，适合快速实现） #

直接修改html模板，给每个input添加模板引用变量，点击按钮时直接传递三个输入框的value：

<div class="container">
  <h1>Update Account Info</h1>
  <form>
    <label for="firstName">First Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="firstName" #firstNameInput>
    </div>
    <label for="secondName">Second Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="secondName" #secondNameInput>
    </div>
    <label for="lastName">Last Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="lastName" #lastNameInput>
    </div>
    <button (click)="onClick($event, firstNameInput.value, secondNameInput.value, lastNameInput.value)" class="update-btn" id="update-btn">Update</button>
   </form>
 </div>

修改ts的onClick方法接收参数即可：

onClick(e: Event, firstName: string, secondName: string, lastName: string){
  e.preventDefault();
  alert(`名字：${firstName}\n中间名：${secondName}\n姓氏：${lastName}`);
}

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