iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
0
Modern Web

Angular初期筆記系列 第 14

DAY14-Angular6之樣板參考變數-實作

  • 分享至 

  • xImage
  •  

說明

在傳送值的過程,有時候會需要一些其他 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>

顯示
https://ithelp.ithome.com.tw/upload/images/20181024/20107754kudLygr6Nj.png

點擊「刪除」

顯示
https://ithelp.ithome.com.tw/upload/images/20181024/20107754cSDber0xGo.png

參考 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}}

顯示
https://ithelp.ithome.com.tw/upload/images/20181024/201077544IJsSRKM3h.png

修改一下,將 #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}}

顯示
https://ithelp.ithome.com.tw/upload/images/20181024/20107754lPo865aKbd.png


上一篇
DAY13-Angular6之data binding-Two-way data binding
下一篇
DAY15-Angular6之表單
系列文
Angular初期筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言