Angular Material导航栏子菜单失效 mat-menu数据不渲染问题咨询

核心问题原因 #

• 模板作用域错位：#submenu定义的<mat-menu>组件放在了*ngFor循环的外部，脱离了循环作用域，根本无法访问循环内每一项的link变量，自然拿不到对应的子菜单数据，触发时也找不到正确的菜单实例。
• 菜单实例冲突：所有带下拉的父菜单项都绑定了同一个#submenu引用，没有给不同的父菜单项分配独立的菜单实例，就算位置正确也会出现所有下拉共用同一个空数据菜单的问题。
• 无效渲染逻辑：子菜单内部嵌套了两层ng-container，重复判断子菜单长度，既增加渲染开销，也没有实际逻辑收益。

修复方案与可运行代码 #

调整思路：

• 把<mat-menu>的定义移入每个*ngFor循环的内部作用域，让每个菜单实例可以直接读取当前循环项的子菜单数据
• 给每个父菜单项绑定的触发器分配独立的本地模板引用，避免多个菜单项共用同一个菜单实例
• 删掉冗余的嵌套判断逻辑，直接在菜单内部循环渲染子项

修复后的代码：

<mat-nav-list class="navigation relative">
  <div *ngFor="let link of navLinks; let i=index" style="padding-bottom: 14px;">
    <div class="card">
      <mat-list-item appAccordionlinks routerLinkActive="active-link" (click)="onClick(link.name)">
        <!-- 带子菜单的导航父项 -->
        <ng-container *ngIf="link?.submenu?.length > 0">
          <a mat-button [matMenuTriggerFor]="currentSubmenu" appAccordiontoggle class="relative main-active">
            <mat-icon *ngIf="link.icon">{{link.icon}}</mat-icon>
            <img class="menu-img" *ngIf="link.img" [src]="link.img" alt="">
            <app-menu-icon *ngIf="link.img" [name]="'employee'"></app-menu-icon>
            <span>{{link.name}}</span><span fxFlex></span>
          </a>
          <!-- 独立作用域内的子菜单实例 -->
          <mat-menu #currentSubmenu="matMenu">
            <button mat-menu-item *ngFor="let sublink of link.submenu">
              <img class="menu-img" *ngIf="sublink.img" [src]="sublink.img">
              <span>{{sublink.name}}</span>
            </button>
          </mat-menu>
        </ng-container>

        <!-- 无下拉的普通导航项 -->
        <a *ngIf="!(link?.submenu?.length > 0)" [routerLink]="link.path" appAccordiontoggle
            class="relative main-active" mat-ripple fxLayout="row">
          <mat-icon *ngIf="link.icon">{{link.icon}}</mat-icon>
          <app-menu-icon *ngIf="link.img" [name]="link.name" [color]="link.color"></app-menu-icon>
          <span>{{link.name}}</span>
        </a>
      </mat-list-item>
    </div>
  </div>
</mat-nav-list>

内容的提问来源于stack exchange，提问作者Kumaravel A