除了data binding之外，直接在component內使用資料的方法：

local reference

  1. template html定義

自行定義要被傳入的物件名稱

1
<input type="text" #specialInput>

將此物件傳入被呼叫的function

1
<button (click)="addInput(specialInput)">Add Input</button>
  1. component.ts撰寫function

在這裡就可以直接取得這個input的值了！

1
2
3
addInput(nameInput: HTMLInputElement) {
    console.log(nameInput.value);
}

ViewChild()

  1. template html定義

與local reference相同

  1. component.ts
1
2
3
4
5
@ViewChild('specialInput', {static: true}) specialInput: ELementRef;

addInput(nameInput: HTMLInputElement) {
    console.log(this.specialInput.nativeElement.value);
}