說明

在傳送值的過程，有時候會需要一些其他 element 的 properties，於是就用 JS 的 docoument.get... 去抓元素，直到一天我發現了，樣板參考變數，這是一個非常棒的東西，可以很方便的參照到 DOM 元素，去做一些事情，相見恨晚呀！好啦是上保哥的課知道的。

使用方式

• 一般參考 element dom
• 參考 component
• 參考 directive

一般參考 element dom

input dom：https://www.w3schools.com/jsref/dom_obj_text.asp
phone 參考到 input dom，在 button element 使用事件繫結 ，click 後 input dom 就被刪掉了

src\app\app.component.html
-----
<input type="text" #phone placeholder="我要被刪除啦！">
<button (click)="phone.remove()">刪除</button>

顯示

點擊「刪除」

顯示

參考 component

[等有介紹到新增 component 後，會陸續解鎖]

參考 directive

directive 可以改變該行為並將 值 設置為其他東西，例如它自己。NgForm 指令就是這樣做的
https://angular.io/guide/forms#summary

src\app\app.component.ts
-----
export class AppComponent {
    something = '我是something';
}

src\app\app.component.html
-----
<input type="text" required name="helloIName" [(ngModel)]="something" #directiveYA>
<br>
name:{{directiveYA.name}}
<br>
value:{{directiveYA.value}}
<br>
status:{{directiveYA.status}}

顯示

修改一下，將 #directiveYA="ngModel"

src\app\app.component.html
-----
<input type="text" required name="helloIName" [(ngModel)]="something" #directiveYA="ngModel">
<br>
name:{{directiveYA.name}}
<br>
value:{{directiveYA.value}}
<br>
status:{{directiveYA.status}}

顯示