首页 > 代码库 > Angular2-无法给元素的属性做双向绑定,除非这个属性是指令或者组件

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

  呈现一个实体对象的DOM结构,这个DOM有个自定义属性是需要动态赋值的,比如说 item.data 要绑到自定义属性 data 上;你可能会这么写: data="http://www.mamicode.com/{{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-无法给元素的属性做双向绑定,除非这个属性是指令或者组件