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>。

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

有任何想法如何使用anchor链接标签防止这种情况？ 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;
 }