範本參考變數 (Template Reference Variables)

說明

1. 給DOM元素設定範本參考變數
2. 範本參考變數指向的是該DOM元素物件
3. 只有在該範本(Template)中才可使用該範本參考變數

Template語法：

<element #範本參考變數名稱></element>

程式碼範例：

1.在Template中給元素設定範本參考變數名稱

<input #phone placeholder="phone number">

2.在Component.ts中加入方法callPhone()印出傳入的參數

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

@Component({
  selector: 'example-component',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  callPhone(element){
    console.log(element);
  }

  constructor() { }

  ngOnInit() {
  }

}

3.在Template中做一個按鈕，用事件繫結傳入該範本參考變數名稱的元素，使用callPhone()來印出該元素

<button (click)="callPhone(phone)">檢視元素</button>