[從 0 開始的 Angular 生活]No.18 認識範本參考變數

發表於 | 更新於 | 分類於

前言

結束資料繫結的學習後，接著介紹關於範本參考變數 ( Template Reference Variables ) ，讓我們一起看看吧！

範本參考變數 ( Template reference variables )

從字面上來解讀，這是一種可以用在 Template 上的一種設定變數的方式。

  • 它的語法就是在任意的標籤裡面使用一個 # 字號加上一個變數名稱，如 #name 。

    • 會在這個 Template 中建立一個名為 name 的區域變數
    • 該變數僅存在於目前這個元件 Template 中
    • 而這個區域變數會儲存這個標籤的 DOM 物件
    • 可以透過事件繫結將任意 DOM 物件傳回元件類別中 ( Component Class )

  • 以下語法完全相等，差別在於使用 # 字號是語法糖

    • #name
    • ref-name

實際宣告範本參考變數

我們將修改上次那份計算輸入字數的 Template ，觀察當中的差異。

需要特別注意的是，替範本參考變數取名時，盡量不要與之前設定過的屬性 ( Property ) 重複名稱，否則可能會有一些問題產生。

Template

1
2
3
4
5
6
7
8
9
10
<div class="widget-content">
  <div id="searchbox">
    <input type="text" placeholder="請輸入搜尋關鍵字" accesskey="s"
      #tinputValue
      [(ngModel)]="inputValue"
      (keydown.escape)="cleanInput()">
    <input type="button" value="搜尋" id="searchbutton">
  </div>
  輸入文字：{{inputValue}} 目前字數 <span>{{tinputValue.value.length}}</span>
</div>

於是在普通的 input 上設定一組範本參考變數 #tinputValue ，此時 #tinputValue 的值會是這個 input 的 DOM 物件。

因此可以直接操作 DOM 物件，取得當中的 value 屬性並且計算其長度，而這個部分就是所謂的範本參考變數。

而且可在任何標籤上，設定唯一的範本參考變數，只要名稱不同即可。

建立一個新元件 HeaderComponent

範本參考變數除了使用在一般的 HTML 標籤上，也可以使用在 Directive ，具體來說怎麼做呢？

  • 建立一個新的 Component
    • 輸入 ng g c header 建立新的 Component ，並且取名叫 header
  • 將網頁中 header 區塊移入這個 Component ，並將新的 Component 加到 AppComponent 的 template 內
  • 因為 HeaderComponent 內有使用到一些屬性，因此還需要調整 class 內的程式碼
    • 到 app.component.ts 內把有用到的屬性都搬到 header.component.ts

調整完畢後 header.component.ts 內容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  title = 'firstAngular';
  link = 'http://www.google.com';
  imgUrl = '/assets/images/logo.png';
  constructor() { }

  ngOnInit() {
  }

  changeTitle(altKey: boolean) {
    if (altKey) {
      this.title = 'changeTitle';
    }
  }
}

接著運行開發伺服器，確認 HeaderComponent 是否正確執行。

看來是設定成功了，接著我們要在這個 Directive 上使用範本參考變數。

在 Directive 上使用範本參考變數

首先一樣在 <app-header #tHeader></app-header> 上加入 #tHeader ，意思是建立一個範本參考變數。

接著我們隨意找一個 HTML 標籤上加入事件繫結，如：

1
<section class="container" (click)="tHeader.">

這時會發現 VS Code 會跳出 HeaderComponent 內所有的屬性給我們選取。

HeaderComponent 內所有的屬性

之前說如果把範本參考變數使用在普通的 HTML 標籤上，則代表的值是該標籤的 DOM 物件。

而如果把範本參考變數使用在 directive 上，則代表的值就是背後所對應的 Component ，在這個範例內也就是 HeaderComponent 。

因此可以存取這個 Component 底下所有的屬性，如：

1
<section class="container" (click)="tHeader.title='Title Change'">

接著運行開發伺服器，並且任意的點一下，觀察標題是否改變。

小結

以上就是範本參考變數在 Directive 上的應用，值得一提的是範本參考變數只能在範本( Template ) 內使用，在 Component 內預設是沒辦法使用的。不過還是有一些進階的技巧可以幫助我們在 Component 中取用範本參考變數，但眼下還是先學習其他基礎的部分吧，進階技巧等之後碰到再來談。

directive 看了很多次但卻不太清楚是什麼意思，接下來要好好針對這個名詞做了解囉。

0%