Angular2-給屬性作雙向綁定

　　呈現一個實體對象的DOM結構，這個DOM有個自定義屬性是須要動態賦值的，好比說 item.data 要綁到自定義屬性 data 上；你可能會這麼寫： data="{{item.data}}" ，但直接用插值語法會報錯的。

　　這裏有個方案：自定義一個指令：「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有給屬性作綁定的語法： [attr.屬性名]=屬性值 。

　　正確的示例以下：

<div [attr.data]="data">{{data}}</div>

 　　style、class也有相似的語法： [style.樣式名]=樣式值 、 [class.樣式類名]=true/false 。