如何双击打开角垫菜单？

Question

我想在单击触发器元素两次时打开 mat-menu。 目前它在第一次点击后打开，在另一个点击后关闭。

<div [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger">Trigger element</div>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

尝试添加 (dblclick)="menuTrigger.OpenMenu()" 来触发元素。

<div (dblclick)="menuTrigger.OpenMenu()" [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger">Trigger element</div>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

尝试添加 (focus)="menuTrigger.openMenu()" 来触发元素。

<div (focus)="menuTrigger.openMenu()" [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger">Trigger element</div>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

尝试从 component.ts 打开

export class ExampleComponent {
  @ViewChild('menuTrigger') trigger: MatMenuTrigger;

  open() {
    this.trigger.openMenu()
  }

<div (dblclick)="open()" [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger">Trigger element</div>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

尝试从触发器元素中删除点击处理程序

export class ExampleComponent implements AfterViewInit{
  @ViewChild('menuTrigger') trigger: MatMenuTrigger;

  ngAfterViewInit() {
    this.trigger._handleClick = ()=>{}
  }

Answer 1

你可以尝试类似的东西

<div [matMenuTriggerFor]="menu" (dblclick)="someMethod()">Trigger element</div>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

然后在控制器中

class MyComponent {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  someMethod() {
    this.trigger.openMenu();
  }
}

希望这对你有一些帮助。