首页 > 其他 > 详细

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

时间:2017-06-09 13:10:08      阅读:803      评论:0      收藏:0      [点我收藏+]

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

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

原文:http://www.cnblogs.com/longhx/p/6971484.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!