Angular2-無法給元素的屬性做雙向綁定,除非這個屬性是指令或者組件
阿新 • • 發佈:2017-06-09
lec input bsp 操作 data hang 前綴 綁定 對象
呈現一個實體對象的DOM結構,這個DOM有個自定義屬性是需要動態賦值的,比如說 item.data 要綁到自定義屬性 data 上;你可能會這麽寫: data="{{item.data}}" ,但直接用插值語法會報錯的。
Angular2無法給非指令或者組件做雙向綁定。
如果非要這麽做,這裏有個這種方案:自定義一個指令:“data”專門接收“item.data”數據,然後在指令內部做操作,將data數據綁上去。
示例如下:
@Directive({ selector: ‘[data]‘, inputs: [‘data‘] }) export class DataDirective { private data; constructor(private el: ElementRef; private render: Renderer) { } ngOnChanges() { this.render.setElementAttribute(this.el.nativeElement, ‘data‘, this.data);} }
指令渲染出來後會被加上Angular2特有的前綴,所以得在指令裏重新補上data屬性。用Onchanges生命鉤子監聽data的變化,有變動時,更新值。
註意:傳給該指令的值不能是對象,onchanges無法監聽對象內部屬性的變化。
Angular2-無法給元素的屬性做雙向綁定,除非這個屬性是指令或者組件