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 。