时间戳

首页 > 解决方案 > 如何双击打开角垫菜单？

javascript - 如何双击打开角垫菜单？

问题描述

单击两次触发元素时，我想打开 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 = ()=>{}
  }

标签： javascriptangularangular-material

解决方案

你可以尝试类似的东西

<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();
  }
}

希望这对您有所帮助。

推荐阅读