Angular Material - 僅當條件為真時才在鼠標懸停時顯示 Mat-Menu

Question

快速提問。 我想在鼠標懸停在帶有組件標題的 div 元素上觸發Mat-menu ，但僅當某些特定條件設置為 true 時。

我有這樣的事情：

<div class="card-header"
     [matMenuTriggerFor]="comp.RejectionDetails ? rejectionDetails : null" 
     #trigger="matMenuTrigger" (mouseenter)="trigger.openMenu()" 
     (mouseleave)="trigger.closeMenu()">
  <mat-menu #rejectionDetails [class]="'mat-menu-component'"
            [hasBackdrop]="false">
      <ng-template matMenuContent>
           <div>TEST</div>
      </ng-template>
  </mat-menu>

它似乎按預期工作但在控制台中它拋出錯誤：

UniversalDynamicComponent.html:10 錯誤錯誤：matMenuTriggerFor：必須傳入 mat-menu 實例。

 Example: <mat-menu #menu="matMenu"></mat-menu> <button [matMenuTriggerFor]="menu"></button>

我知道這是因為將空值傳遞給指令（當條件為假時）。 但我想不出解決這個問題的其他方法。 也許有人可以幫忙？ 謝謝！

Answer 1

嘗試不在 [matMenuTriggerFor] 上設置條件，而是在 (mouseenter) 事件上設置這樣的條件：

 [matMenuTriggerFor]="rejectionDetails" 
 (mouseenter) = "comp.RejectionDetails ? trigger.openMenu() : null"  

Answer 2

花了 2-3 小時后，我發現這個問題最簡單的解決方法是，

1. 定義 2 個墊子菜單，一個用於您的正常行為，另一個菜單不顯示任何內容。 （這樣做的原因是因為“matMenuTriggerFor”不能為 false 或 null 它需要有一個 mat-menu 對象）

    <mat-menu #sub_menu="matMenu"> <button>menu-button 1</button> <button>menu-button 2</button> </mat-menu> <mat-menu #fake_menu="matMenu" class="fake-menu"></mat-menu>

2. 現在像這樣在你的“matMenuTriggerFor”上設置一個條件：

    [matMenuTriggerFor]="your-boolean-condition? your-normal-menu: fake-menu"

3. 在 CSS 上只寫

    ::ng-deep {.fake-menu { display: none; } }