YuShu Hsiao

在Template裡面(component.html)，在任意的標籤(HTML標籤 或是 使用中的Directive)上使用 #自訂名稱

#自訂名稱 裡面定義的名稱在template 內必須唯一且 不可跟component.ts內的定義的變數(property)相同，

否則會錯誤(保哥建議可以前面加個t來當命名規則) 

會在Template內建立一個 #自訂名稱 的區域變數，只能用於目前元件的範本之中(component.html)

#自訂名稱將會儲存該標籤的DOM物件 ，

這樣就可以透過 事件繫結(event binding) 將DOM物件內的任意屬性傳回component.ts內

除了 #自訂名稱 之外，也可以使用 ref-自訂名稱 (# 是語法糖)

 

就可以直接代表這個DOM物件

舉例來說

<dir>
    <input type="text" #tKeyWord name="" id="" placeholder="請輸入關鍵字" (keyup)="secondChangeWord($event)">
    <span>目前字元:{{secondKeyWord.length}}</span>
    <br>
    <span>使用範本參考變數:{{tKeyWord.value.length}}</span>
</dir>

在<input> 裡面我設定了 #tKeyWord  ，在這個template 裡面就可以代表這個DOM

在下面我就可以使用 {{tKeyWord .value.length}} 來取得這個input DOM 輸入的長度

 

放在Directive上面的話，就代表這個Directive背後的component，可以使用component內的Property

首先定義一個簡單的component:header

template:

<div>
    <span>{{headertitle}}</span>
</div>

component.ts:

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  headertitle = '';

  constructor() {
    this.headertitle = 'This is Header Title!';
  }

  ngOnInit() {}
}

 

然後使用上面的Directive，並且設定一個 template reference variable: #tHeader

最後在div 中設定一個click 事件，就可以直接透過 template reference variable: #tHeader 去更改app-header的proerrty

<app-header #tHeader></app-header>

<div (click)="tHeader.headertitle = 'Change Header Title'">
    <input type="text" #tKeyWord name="" id="" placeholder="請輸入關鍵字" (keyup)="secondChangeWord($event)">
    <span>目前字元:{{secondKeyWord.length}}</span>
    <br>
    <span>使用範本參考變數:{{tKeyWord.value.length}}</span>
</div>