Angular 如何通过注册组件与自定义工具面板通信

我正在尝试创建自定义工具面板，如所述。我希望能够在注册ToolPanel组件的组件和ToolPanel组件的实例之间进行通信。例如，将数据传递给组件并侦听来自组件的事件

我在网上查过，但找不到类似的问题，文档中似乎也没有示例。共享服务可以，但我想知道是否有更直接的方法

父组件将具有类似于此代码（来自文档）的内容，以在侧栏中指定自定义工具面板

    this.sideBar = {
      toolPanels: [
        {
          id: "customStats",
          labelDefault: "Custom Stats",
          labelKey: "customStats",
          iconKey: "custom-stats",
          toolPanel: "customStatsToolPanel"
        }
      ],

this.frameworkComponents = { customStatsToolPanel: CustomStatsToolPanel };

但是组件的接口是

interface IToolPanel {

    // The init(params) method is called on the tool panel once upon component initialisation.
    init(params: IToolPanelParams): void;

    // Returns the GUI for this Tool Panel and can be a string of html or a DOM element.
    getGui(): any;

    // Can be left blank if no custom refresh logic is required.
    refresh(): void;
}

IToolPanelParams只引用GridApi

---

如果能够使用angular的@Input（）和EventEmitter功能在这两个组件之间进行通信，那就太好了。

您可以使用

rxjs的
Behavior Subject
实现类似的功能

看看我创建的plunk:

单击“自定义工具窗格”组件内的按钮，并检查是否从具有该值的组件发出警报

我所做的是用
gridApi
附加
Behavior Subject
类型的
Observable
，并在
AppComponent
中订阅

（this.gridApi如有）。myObsrvr=new BehaviorSubject（）；
（this.gridApi与任何一样）.myObsrvr.subscribe（值=>{
如果（值！=未定义）{
警报（值）；
}
});

现在，在
CustomStatsToolPanel
组件中，使用
myObsrvr
的
next
方法发布值（这与使用
EventEmitter
类似），只要您使用
gridApi
访问该值

（this.params.api如有）.myObsrvr.next（this.counter++）；
您可以使用
rxjs
的
behavior subject
实现类似的功能

看看我创建的plunk:

单击“自定义工具窗格”组件内的按钮，并检查是否从具有该值的组件发出警报

我所做的是用
gridApi
附加
Behavior Subject
类型的
Observable
，并在
AppComponent
中订阅

（this.gridApi如有）。myObsrvr=new BehaviorSubject（）；
（this.gridApi与任何一样）.myObsrvr.subscribe（值=>{
如果（值！=未定义）{
警报（值）；
}
});

现在，在
CustomStatsToolPanel
组件中，使用
myObsrvr
的
next
方法发布值（这与使用
EventEmitter
类似），只要您使用
gridApi
访问该值

（this.params.api如有）.myObsrvr.next（this.counter++）；
您可以使用工具面板参数将参数从组件传递到自定义工具面板组件

.....
  toolPanel: 'customToolPanel',
    toolPanelParams: {
      gridId: 3,
      gridName: example,
    }

您传递的对象可以从自定义工具面板组件的agInit方法访问，该组件正在实现IToolPanel接口

agInit(params): void {
    const receivedParams = { gridId: params.gridId, gridName: params.gridName };
  }

可以使用toolPanelParams将参数从组件传递到自定义工具面板组件

.....
  toolPanel: 'customToolPanel',
    toolPanelParams: {
      gridId: 3,
      gridName: example,
    }

您传递的对象可以从自定义工具面板组件的agInit方法访问，该组件正在实现IToolPanel接口

agInit(params): void {
    const receivedParams = { gridId: params.gridId, gridName: params.gridName };
  }

要将事件发送回组件，只需通过以下方式使用该组件的实例

params.api.getToolPanelInstance('yourToolPanelId')._agAwareComponent

通过这种方式，您可以使用自定义组件中定义的所有属性和变量来将事件发送回组件，您只需通过以下方式使用此组件的实例

params.api.getToolPanelInstance('yourToolPanelId')._agAwareComponent

通过这种方式，您可以使用自定义组件中定义的所有属性和变量
谢谢，但反过来呢，从自定义组件返回ag网格。有可能触发自定义事件吗？使用params.api.getToolPanelInstance（'yourToolPanelId'）获取customToolPanel实例后，使用_agAwareComponent。谢谢，但反过来呢，从自定义组件返回ag网格。是否可以触发自定义事件？使用params.api.getToolPanelInstance（'yourToolPanelId'）获取customToolPanel实例后，使用_agAwareComponent