angular - 如何在mat-menu中有条件地添加[matMenuTriggerFor]

Question

很少有 #menu 项没有子项。但显示指示有子菜单的箭头。这是错误的。如何仅在子菜单中有项目时添加[matMenuTriggerFor]="subMenu"。

<mat-menu #menu="matMenu">
    <ng-container *ngFor="let item of menuItem.items; let i=index"> 
        <button class="mat-menu-item" mat-menu-item
            [routerLink]="item.routerLink" routerLinkActive="active" [matMenuTriggerFor]="subMenu"> {{item.name}}
        </button>
        <mat-menu #subMenu="matMenu"> <button class="mat-sub-menu-item"
                *ngFor="let subitem of menuItem.items[i].subitems" mat-menu-item> {{ subitem.name }} </button>
        </mat-menu>
    </ng-container>
</mat-menu>

Answer 1

实现条件 [matMenuTriggerFor] 的功能已经实现，将在下一个版本的 angular 中呈现: https://github.com/angular/components/commit/856c01639fbf968cb33885807ffaf6d3f3bf5423

在那之前我正在使用下一个解决方法:

HTML

<button [matMenuTriggerFor]="condition ? menu : placeholder"/><button>
<mat-menu #placeholder="matMenu" class="placeholder"></mat-menu>

CSS

.placeholder {
  display: none;
}

在您的情况下 + 隐藏箭头的条件样式。