Angular 筆記 - 範本參考變數基本認識

範本參考變數

在想命名的變數前面加上一個井字號，命給與自定義名稱，就可以完成，EX. #name，為避免與其他命名的變數相同，建議前面加一個任意英文字，我學習保哥的方式，在變數前面加上一個小寫 t，EX. #tName。

假設範本變數為 #tName 要注意的地方如下：

1. 範本內會建立一個名為 #tName 的區域變數。
2. 該 tName 區域變數只能用於目前元件範本中。
3. 該 tName 區域變數會儲存於該標籤的 DOM 物件。
4. 可透過「事件繫結」將任意 DOM 物件中的任意屬性傳回元件類別中。

#tName = ref-tName，使用 # 是語法糖。

使用的地方

可以使用在任意標籤上

如下方範例，只要在標籤上加上範本參考變數就可以使用了。

<input type="text" #tKeyword />

可使用於指令

可以使用在指令標籤，如下方 header 已經被拆分成元件，但在指令標籤中加入範本參考變數 #tHeader，透過事件繫結的點擊事件將範本參考變數作為其值，也可以取用到其指令中定義的方法。

<app-header #tHeader></app-header>
<div class="content" (click)="tHeader">
  <input type="text" placeholder="搜尋框" />
  <p>
    您的難以規劃，你也卻是計劃時候走向作者所在，決定工資專題各自此刻你還歡迎光臨，認為下載一名雲林二手模糊優化足夠請大家那些我的心這個問題，到達鐵路進去對象，你好過了高效屬於當地把你輸入東京不在害怕免費電影運行平台，玄幻基礎偉大學歷合作進口一番，她說清除，把。
  </p>
</div>

DEMO: https://stackblitz.com/edit/angular-ivy-svrzip?embed=1&file=src/app/app.component.html