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

Question

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

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

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

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

Answer 1

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

内部指令：

@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>

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

Data binding between custom directive and controller

angular-directive

angular