0%

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

angular

範本參考變數

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

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

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

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

使用的地方

可以使用在任意標籤上

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

1
<input type="text" #tKeyword />

可使用於指令

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

1
2
3
4
5
6
7
<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