自定义指令和控制器之间的数据绑定答案

【问题标题】：Data binding between custom directive and controller自定义指令和控制器之间的数据绑定
【发布时间】：2018-02-03 05:59:20
【问题描述】：

我有与外部库通信以收集数据的自定义指令。

此指令附加到组件的模板。它做它应该做的事情。

集成到指令的外部库不断向其发送数据。如何在指令和使用指令的组件之间绑定数据？

我已经实现了控制器和模板之间的数据绑定。指令和组件之间的数据绑定方式是否相同？

【问题讨论】：

您可以在指令中使用Output() 在组件更改时始终将数据发送到组件
@Daniomi - 那么我们在模板和控制器之间进行数据绑定的方式是否相同？
一般来说是的。您说指令运行良好并且数据在那里正确更新。因此，任何时候在指令中更新数据时，您emit 都会使用输出更新数据并调用组件方法以将数据绑定到具有属性的模板。您需要更多信息吗？
这很有帮助。谢谢你。我想通过这种方法确保我不会反对角拱，并知道是否有任何替代方案。
用代码 sn-ps 更新了答案。

标签： angular angular-directive

【解决方案1】：

这可以通过使用@Output 角装饰器来实现。

内部指令：

@Output('ap-data-change') apDataChange: EventEmitter = new EventEmitter() 

// or any function that updates data
onChange() {
  ... 
  this.apDataChange.next(someValue);
}

在宿主组件中使用指令：

<div [ap-data]="[1,2,3,4,5]" (ap-data-change)=hostField=event$></div>

或者，这可以传递给如下函数：

<div [ap-data]="[1,2,3,4,5]" (ap-data-change)="_messageReceiver($event)"></div>

【讨论】：