Angular @ViewChild｜在html定義並使用物件

除了local reference方法之外，還可以使用@ViewChild來讓取得html的資料。

如果有多個要使用的值，使用@ViewChild應該可以讓程式碼較容易讀？

1. 在html命名資料

這裡我取名為nameInput：

<input type="text" #nameInput>

並設定觸發的function，這裡不需將nameInput傳進去：

<button (click)="onInput()"></button>

2. 在ts設定@ViewChild

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

@ViewChild('nameInput', {static: false}) nameInputRef: ElementRef;

onInput() {
    console.log(this.nameInputRef.nativeElement.value);
}

3. 可以將資料emit給上層使用

@Output() inputAdded = new EventEmitter<string>();

onInput() {
    this.inputAdded.emit(this.nameInputRef.nativeElement.value);
}