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的例子在这里.

Answer 1

尝试这个

[matMenuTriggerFor]="disabled?null:menu"

Answer 2

好吧,锚标签没有禁用属性,所以你不能这样禁用它.
您可以将其更改为按钮并更改其样式.

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