資料綁定

發表於 更新於 分類於 Disqus：

TypeScript與HTML間溝通的橋樑，最主要分為這三種

  • 屬性綁定
  • 事件綁定
  • 雙向綁定

內崁binding (Interpolation)

雙向，綁定script 與HTML變數使用

1
{{data}}

屬性binding (property binding)

屬性綁定，單向，父元件傳遞給子元件，子元件透過在component的class內加入@input接取

1
[property]='data'
1
@Input() name:string='alan';

事件binding (event binding)

父元件偵測子元件異動，當有異動時，子元件會emit出指定的物件，再由父元件在ngOnchange()做事件攔截

子元件component.ts

1
2
@Output() newItemEvent = new EventEmitter<string>();
this.newItemEvent.emit('hello world');

父元件component.html

1
(event)='getEmitter($event)'

雙向binding (two way binding)

跟雙大括號一樣效果，讓HTML可以直接呼叫TS中宣告的變數value

1
2
3
[(title)]='name'
<!-- // 等同於 -->
[title]='name' (titleChange)='name=$event'

表單控制，要先引入FormModule，有表單控制效果…

1
[(ngModel)]='testItem'