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 。