在回调函数中获取元素实例

Question

我正在开发一个 Angular 库，一种用于黄金布局的 Angular 包装器。 我创建了一个名为ActionItem的界面，可以在组件选项卡中添加带有操作的按钮：

export interface ActionItem {
label: string;
icon?: string;
iconColor?: string;
action: (...params: any[]) => any;
}

问题是，当我在另一个接口中使用此接口时，我用它来定义应用程序中组件(GoldenLayout 组件，而不是 Angular 组件(的结构，我不知道如何通知action有关组件的当前实例。

目前，我只设法向生成的按钮添加一个instanceId属性，在库服务中通过此值映射组件(这次是 Angular(。但是我不知道如何将此值"注入"我在action中定义的侦听器中

Answer 1

似乎我解决了：也许不是最优雅的解决方案，但它有效。

我将action类型更改为Function

在创建按钮的服务中，我做了这个：

const _action = item.action.bind(component.instance);
actionBtn.addEventListener('click', _action, false);

其中item是ActionItem本身，component是表示正在创建的对象ComponentRef对象。

通过这种方式，在我的应用程序中以这种方式定义(黄金布局(组件：

{
...
component: Test1Component as Component,
...
tabActions: [
{
label: 'Test',
icon: 'fa fa-heart',
action: function () { console.log(this) }
} as ActionItem
]
}

this将引用组件实例。希望它能帮助别人