Angular 11 - 具有可变点击事件的动态上下文菜单

Question

我正在尝试制作一个具有可变点击事件操作的动态上下文菜单。我想我已经很接近解决它了，但是有一个主要问题，我无法将任何参数传递给单击事件操作，如下所示。

这是上下文菜单项组件的代码

import { Component, HostListener, Input } from '@angular/core';


@Component({
  selector: 'contextmenu-item',
  template: `<span>{{ label }}</span>`,
  styleUrls: ['./contextmenu-item.component.scss']
})
export class ContextmenuItemComponent {

  constructor() { }

  @Input() public label: string = "default";

  @HostListener('click') public click!: (data: any) => void;

}

这是我如何使用 ComponentFactoryResolver 在上下文菜单中插入菜单项的一个小示例。

@ViewChild("contextmenu") $contextmenuComponent!: ContextmenuComponent;
@ViewChild("contextRef", {read: ViewContainerRef}) $ref!: ViewContainerRef;

openContextMenu(event: IGridCellEventArgs, documentGridBoundary: HTMLDivElement) {
    this.$contextmenuComponent.show(event, documentGridBoundary); // this line displays the menu 
                                                                     container
    
    const component = this.factory.resolveComponentFactory(ContextmenuItemComponent)
    const item1 = this.$ref.createComponent(component);
    //const item2 = this.$ref.createComponent(component);
    //const item3 = this.$ref.createComponent(component);

    item1.instance.label = "Open" ;
    item1.instance.clickAction = this.contextOpenDocument;  //this is the method I'm binding to the  
                                                              ContextmenuItemComponent click-event
}

如上所述，我的主要问题是无法将参数传递给 clickAction，我想将事件参数从“openContextMenu”传递给 clickAction。

编辑：

更好的是，我如何将 (click)="func()" 之类的东西附加到像上面那样创建的组件？

Answer 1

我想通了！

在 ContextmenuItemComponent 中，我可以设置一个事件发射器，以便在单击时发射。并在我创建组件时订阅它！

Angular 11 - 具有可变点击事件的动态上下文菜单

Angular 11 - Dynamic contextmenu with changeable click events

contextmenu

typescript

angular