Angular ViewChild - 获取输入元素的值

在Angular中，ViewChild是一个装饰器，用于获取在模板中使用的子组件和指令以及DOM元素。其中，获取DOM元素是ViewChild最常用的用法之一，可以轻松获得输入元素的值。

使用 ViewChild

首先需要引入ViewChild装饰器：import { ViewChild } from '@angular/core';

然后可以在组件类中添加一个ViewChild属性，类似这样：

@ViewChild('myInput') input: ElementRef;

其中，myInput是模板中引用该元素的名字， ElementRef是Angular提供的元素引用类型。

然后就可以在代码中获取输入元素的值了：

const value = this.input.nativeElement.value;
console.log(value);

示例

下面是一个简单的使用ViewChild获取输入元素的值的示例。

模板

<input #myInput type="text" value="hello world">
<button (click)="onButtonClick()">点击获取输入值</button>

组件

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input #myInput type="text" value="hello world">
    <button (click)="onButtonClick()">点击获取输入值</button>
  `
})
export class AppComponent {
  @ViewChild('myInput') input: ElementRef;
  
  onButtonClick() {
    const value = this.input.nativeElement.value;
    console.log(value);
  }
}

总结

通过 ViewChild 可以轻松获取输入元素的值，这对于 Angular 开发者来说非常方便。需要注意的是，ViewChild 获取的是 ElementRef 对象，需要通过 nativeElement 属性获取最终的 DOM 元素，才能获得里面的值。