组件和同一元素上的指令之间的两种方式数据绑定？

Posted 2023-03-13

【中文标题】组件和同一元素上的指令之间的两种方式数据绑定？

【英文标题】：Two way data binding between a component and a directive on the same element?

【发布时间】：2017-02-14 09:34:27

【问题描述】：

<tab mousePosCollector></tab>

MousePosCollectorDirective 和 TabComponent 都有一个属性 x。当x 中的属性x 发生变化时，如何在TabComponent 中更新属性x？

标准双向数据绑定似乎不是我的解决方案。

<tab mousePosCollector [(x)]="x"></tab>

这将在MousePosCollectorDirective 和TabComponent 的父组件之间启动双向数据绑定，而不是TabComponent 本身，这正是我想要的。

谢谢！

【参考方案1】：

我猜双向绑定应该可以工作Plunkr：

指令

@Directive(
  selector: '[mousePosCollector]'
)
export class MousePosCollectorDirective  
  @Input() x;
  @Output() xChange = new EventEmitter();
  ngOnInit() 
    setTimeout(() => 
      this.x = ++this.x;
      this.xChange.emit(this.x);
    , 1000)
  
  ngOnChanges() 
    console.info(`Changes from MousePosCollectorDirective: $this.x`);
  

组件

@Component(
  selector: 'tab',
  template: `<h3>tab x</h3>`
)
export class TabComponent 
  @Input() x;
  @Output() xChange = new EventEmitter();
  ngOnInit() 
    setTimeout(() => 
      this.x = ++this.x;
      this.xChange.emit(this.x);
    , 2000)
  
  ngOnChanges() 
    console.info(`Changes from TabComponent: $this.x`);
  
   

父组件

@Component(
  selector: 'my-app',
  template: `
    <tab mousePosCollector [(x)]="x"></tab>
    x`
)
export class AppComponent 
  x = 1;
  ngOnInit() 
    setTimeout(() => 
      this.x = ++this.x;
    , 3000)