Angular Material Mat Menu禁用matMenuTriggerFor

Question

我有以下材料菜单：

<a mat-button [matMenuTriggerFor]="menu" disabled="true">Menu</a>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

请注意，我有一个<a>标签，而不是<button>。

我想禁用垫菜单触发器。如果我使用button标签，它可以工作，如果我将其用作ancor标签，它仍然会打开菜单：

有什么想法如何通过anchor链接标记来防止这种情况？ Stackblitz example here.

Answer 1

好吧，anchor标签没有禁用的属性，因此您不能以这种方式禁用它。 您可以将其更改为button并更改其样式。

或者您可以使用
 pointer-events: none

禁用单击。
例如：

<a mat-button [matMenuTriggerFor]="menu" [ngClass]="{ 'disabled' :condition }">Menu</a>
 <mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
   <button mat-menu-item>Item 2</button>
 </mat-menu>

以及在CSS中：

.disabled {
  pointer-events:none;
  opacity:.5;
 }

Answer 2

在我的解决方案中，我只是通过继承 MatMenuTrigger 来禁用点击事件处理。

import {Directive, Input} from '@angular/core';
import {MatMenuTrigger, MatMenuPanel} from '@angular/material/menu';

@Directive({
    selector: `[sgMenuTriggerFor]`,
    exportAs: 'sgMenuTrigger'
})
export class SgMenuTrigger extends MatMenuTrigger {
    _handleClick(event: MouseEvent): void {}

    @Input('sgMenuTriggerFor')
    get menu() { return super.menu; }
    set menu(menu: MatMenuPanel) {
        super.menu = menu;
    }
}