Angular2-无法给元素的属性做双向绑定，除非这个属性是指令或者组件

Posted 2020-09-22 乐小天

　　呈现一个实体对象的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无法监听对象内部属性的变化。