資料繫結是NG的重頭戲之一,透過多種資料繫結的方式,使NG在撰寫的時候能夠更靈活,在這篇來記錄一下資料繫結的幾種方法。
內嵌繫結
{{屬性名稱}}
可以在html中直接使用二個大括號來表示JS中的屬性
屬性繫結
[屬性名稱]="屬性名稱",[]內的屬性名稱,表示的是當前的物件中,所擁有的屬性
例如img就有alt屬性,因此可以使用[alt]="屬性名稱",若是使用NG所產生的元件,更可以將元件中的屬性這邊綁定
例如元件名稱為Man,裡面有屬性為Name,就可以用這種語法
<Man [Name]="屬性名稱"></Man>
事件繫結
(事件名稱)="函式名稱()"
平常寫的onclick,在這邊就會變成(click)="函式名稱()",簡單來說就是換個寫法的點擊事件而已XD
雙向繫結
[(ngModel)]='屬性名稱'
我覺得這個式NG的特色,一個被綁定屬性傳到類之中,會在觸發NG自己的機制,去修改相關的綁定資料。
是效能的殺手之一,使用時要注意,但也是很方便的寫法。
有另外一種綁定方式,就是在觸發時的參數帶物件($event)進去,透過$event.target.value即可取到值,再去對屬性再次綁定
歡迎您的加入,讓這個社群更加美好!