iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0
Modern Web

Angular初期筆記系列 第 9

DAY9-Angular6之data binding-Property和Event

先備知識

Attribute (中文:屬性) 和 Property (中文:屬性) 區別

  • Attribute 屬於 Html
  • Property 屬於 DOM

下面連結文章有相當的詳細的說明
https://www.w3cplus.com/javascript/dom-attributes-and-properties.html © w3cplus.com
 
 
 
 
 


Property binding (中文:屬性繫結)

符號:[屬性名稱]="值"
[1]使用一個 template property 要繫結並設定一組 property 在 view element 上,這組繫結的屬性 value 可以使用 template expression (中文:樣板表達式)

以下介紹三種使用方法

  • 一般綁定 html 屬性
  • 綁定 directive
  • 配置一組 model 屬性到一個自訂 component (等路由開啟就會陸續出現了)

一般綁定 html 屬性

src\app\app.component.ts
-----
export class AppComponent {
    title = 'app';
    isOpen = false
}
src\app\app.component.html
-----
<h1>
    Welcome to {{title}}!
    <button class="" type="button" [disabled]="isOpen">Click Me!</button>
</h1>

顯示
https://ithelp.ithome.com.tw/upload/images/20181018/20107754rOAn3a0pIe.png

綁定 directive

所有 angular 的 directive
https://angular.io/api?type=directive

src\app\app.component.ts
-----
export class AppComponent {
    myStyle = {'color': 'yellow', 'background-color' : 'red'};
}
src\app\app.component.html
-----
<h1 [ngStyle]="myStyle">
    Welcome to {{title}}!
</h1>

顯示
https://ithelp.ithome.com.tw/upload/images/20181018/201077544AJwwTQsDW.png

配置一組 model 屬性到一個自訂 component

等路由開啟就會陸續出現了
 
 
 
 
 


Event binding (中文:事件繫結)

符號:(觸發動作)="事件名稱"
[2]到目前為止,您遇到的 bindings directives 資料流都是同一種方向:從 component 到 element
使用者不會只是看著螢幕,他們也會輸入文字到輸入框、從清單中挑選選項和點擊按鈕,這樣的使用者操作就是一種反向的資料流:從 element 到 component
用一種方法去知道使用者的活動,監聽某些事件,像是 鍵盤事件、滑鼠事件、點擊事件和觸碰事件,你可以在你感興趣的地方,宣告一個 angular event binding

[2]$event and event 處理狀態說明
在一個 event binding,angular 設置一個 event 去處理這個 target event。
事件發生時,處理器會執行 template statement (中文:樣板表達)。template statement 通常會包含接收器,接收器執行回應事件的動作,例如從 html control 的值 儲存到一個 model。
這個 binding 傳遞關於 event 的訊息,包含 data value,並通過 event object 稱為 $event。
event object 的 型別 由 target event 確定,假如 target event 是 native DOM element event,那 $event 就是一個 DOM event object,帶有 properties 像是 target 和 target.value

以下介紹兩種使用方法

  • 綁定 觸發事件 執行 動作或某方法
  • 傳送事件到別的 component (等路由開啟就會陸續出現了)

綁定 觸發事件 執行 動作或某方法

下列範例是利用 input 事件,修改 showMyValue 的值

src\app\app.component.ts
-----
export class AppComponent {
    showMyValue = '';
}
src\app\app.component.html
-----
<input type="text" (input)="showMyValue = $event.target.value">

{{showMyValue}}

顯示
當在輸入框輸入內容,下列就會立刻顯示
https://ithelp.ithome.com.tw/upload/images/20181018/20107754ibTdJSxYzC.png

傳送事件到別的 component

等路由開啟就會陸續出現了

參考來源

[1]
Property binding
[2]
Event binding


上一篇
DAY8-Angular6之data binding-Interpolation
下一篇
DAY10-Angular6之data binding-Attribute
系列文
Angular初期筆記30

尚未有邦友留言

立即登入留言