Template Reference Variables 參照類型

放在 HTML 元素上

<!-- 參照到 DOM 元素 -->
<input #inputRef>  <!-- inputRef: HTMLInputElement -->
<div #divRef>     <!-- divRef: HTMLDivElement -->

放在元件上

<!-- 參照到元件實例 -->
<app-dashboard-button #btn>
  Submit
</app-dashboard-button>
<!-- btn: DashboardButtonComponent -->

這時候取得的是整個元件實例，可以：

• 訪問元件的公開屬性

• 調用元件的公開方法

• 使用元件的 API

放在指令上

<!-- 參照到指令實例 -->
<button appButton #btn>
  Submit
</button>
<!-- btn: 如果 appButton 是指令，會得到指令的實例 -->

使用範例：

@Component({
  template: `
    <app-dashboard-button #btn>
      Submit
    </app-dashboard-button>
    <button (click)="btn.someMethod()">Call Component Method</button>
  `
})

---

拿到的是 component 實例，不是不是 DOM