Angular Material 垫子菜单禁用 matMenuTriggerFor

Question

我有以下 material 菜单：

<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 link 标签防止这种情况的想法？ Stackblitz example here.

Answer 1

嗯，锚标签没有被禁用属性所以你不能这样禁用它。
您可以将其更改为按钮并更改其样式。

或者您可以使用
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;
    }
}

Angular Material 垫子菜单禁用 matMenuTriggerFor

Angular Material Mat Menu disable matMenuTriggerFor

anchor

angular-material

angular