Html 以角度创建递归动态扩展导航的正确方法是什么，以及如何正确切换其菜单项？

我正在开发一个Angular 8应用程序。我在应用程序中使用boostrap 4布局。我创建的是一个包含一些嵌套菜单项的菜单。下面是创建动态扩展导航栏的示例

我面临的问题是，当我单击我的（第一级/父级）菜单项时，它会展开所有嵌套的菜单项，这是我想要阻止的

下面是我尝试过的代码：

<div class="row">
  <div *ngTemplateOutlet="recursiveMenu; context:{ $implicit: navItems }"></div>
  <ng-template #recursiveMenu let-menus>
    <ul class="w-100">
      <li *ngFor="let menu of menus;">
        <a class="align-self-stretch text-left" href="#" title="{{menu.displayName}}" (click)="onItemSelected(menu)">
          <i class="fa {{menu.iconName}}"></i> <span class="nav-header-primary p-2">{{menu.displayName}}</span> &nbsp;
          <span *ngIf="menu.children" class="fa fa-caret-down fa-2x pull-right" [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
          </span>
        </a>
        <ul *ngIf="menu.children && expanded" id="nav{{menu.id}}">
          <ng-container *ngTemplateOutlet="recursiveMenu; context:{ $implicit: menu.children }"></ng-container>
        </ul>
      </li>
    </ul>
  </ng-template>
</div>

---

这是一个密码。让我知道我哪里做错了。

当您展开父项时，所有子菜单项都会展开，因为您维护了一个公共/单个标志，用于检查菜单是否处于展开状态。 因此，当您展开父项时，展开标志将设置为true，并且所有菜单项也将展开。 因此，您可以在地图中为每个项目维护一个标志，而不是维护一个公共标志。 您可以在菜单列表中添加id属性：

navItems: INavItem[] = [
    {
      id: 1,
      displayName: 'Home',
      iconName: 'fa-home fa-lg p-2',
      route: 'home'
    },
    {
      displayName: 'Settings',
      id: 2,
      iconName: 'fa-cog',
      children: [
        {
          displayName: 'Navigation Management',
          iconName: 'fa-sliders',
          id: 3,
          children: [
            {
              displayName: 'Navigation & Form Mapping',
              id: 4,
              iconName: 'fa-handshake-o',
              route: 'navigation-form-mapping'
            }]
    }]
}]

您可以在更新您的onItemSelected函数时，将use expanded作为键值对的映射进行维护，如下所示：

onItemSelected(item: INavItem) {
    if (item.children && item.children.length) {
      this.expanded[item.id] = !this.expanded[item.id];
    }
}

您的html可以更新为：

 <span *ngIf="menu.children" class="fa fa-caret-down fa-2x pull-right" [@indicatorRotate]="expanded[menu.id] ? 'expanded': 'collapsed'">
 </span>
 <ul *ngIf="menu.children && expanded[menu.id]" id="nav{{menu.id}}">
      <ng-container *ngTemplateOutlet="recursiveMenu; context:{ $implicit: menu.children }"></ng-container>
 </ul>

---

伟人，我怎么能忘记这一点。