如何在操作菜单中使用 stopPropagation，使用 angular

Question

我需要修复手风琴中的一个错误。

HTML:

                     <p-menu
                      #menu
                      [popup]="true"
                      [model]="menusMap[item.id]"
                    ></p-menu>
                    <button
                      pButton
                      class="p-button-text"
                      icon="pi pi-ellipsis-h"
                      (click)="menu.toggle($event)"
                    ></button>

在 ts 我有：

 menusMap: Record<string, MenuItem[]> = {};
  e!: Event;

   function(){
      ......
        if (page.list) {
            const items = page.list;
            this.menusMap = {};
            items .forEach((item) => {
              this.menusMap[item.id] = this.createMenuList(item);
            });
          }
  }

  createMenuList(item: Items): MenuItem[] {
    this.e.stopPropagation();  // I used this but doesn't work. Only blocks the list display
    return [
      {
        label: '',
        icon: '',
        command: () =>
          this.router.navigate(/aaa)
      }
    ];
  }

我的问题是，单击 action menu 时我不需要打开手风琴。我只需要打开操作菜单，而不是手风琴。

Answer 1

你可以使用这个技巧：

<button
    pButton
    class="p-button-text"
    icon="pi pi-ellipsis-h"
    (click)="$event.stopPropagation(); menu.toggle()"
></button>

但另外我不得不说你将 $event 传递给了不属于你的函数 .toggle() 并且传递不会改变任何东西。

您可以在 .ts 中实现一个函数并在 .html 文件中调用它。

像这样：

HTML:

<button
    pButton
    class="p-button-text"
    icon="pi pi-ellipsis-h"
    (click)="toggleMenu($event, menu)"
></button>

TS:

public toggleMenu(ev, menuRef) {
    ev.stopPropagation();
    menuRef.toggle();
}

如何在操作菜单中使用 stopPropagation，使用 angular

How to use stopPropagation inside action menu, using angular

stoppropagation

typescript

angular