0

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

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

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

目前，我只设法为instanceId结果按钮添加了一个属性，使组件（这次是 Angular 的）在库服务中由该值映射。但我不知道如何在我定义的监听器中“注入”这个值action

4

1 回答 1

0

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

我将action类型更改为Function

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

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

where itemisActionItem本身，并且component是ComponentRef表示正在创建的对象的对象。

这样，在我的应用程序中以这种方式定义（GoldenLayout）组件：

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

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

于 2019-12-10T16:38:46.933 回答