求助：Angular实现点击主菜单隐藏父项并显示子菜单

问题描述 #

我需要在Angular应用中实现点击主菜单项时，隐藏该主菜单项并显示对应的子菜单。例如点击Agences后，Agences区域消失，替换为子菜单Portefeuilles，目前现有代码无法实现该效果，求指导。

现有代码 #

online.ts

export class OnlineComponent implements OnInit {
  nav: IMenuItem[] = [];

  constructor(private onlineService: OnlineService) { }

  ngOnInit() {
    // Initialize the 'nav' property with data from the 'onlineService'
    this.nav = this.onlineService.IMenuItem;
  }

  toggleSubMenu(index: number) {
    // Toggle the active state of the clicked item
    this.nav[index].active = !this.nav[index].active;

    // Ensure that all other items are deactivated
    for (let i = 0; i < this.nav.length; i++) {
      if (i !== index) {
        this.nav[i].active = false;
      }
    }
  }
}

online.html

<div class="container text-center" *ngIf="nav">
    <div class="sideBar">
      <div class="menu-content">
        <ul class="menu-items">
          <li class="item" *ngFor="let menuItem of nav; let i = index">
            <div class="menu-item" (click)="toggleSubMenu(i)">
              <!-- Display the menu item name -->
              <span class="title">{{ menuItem.name }}</span>
            </div>
            <ul class="submenu" *ngIf="menuItem.active">
              <li class="subitem" *ngFor="let subItem of menuItem.sub">
                <div class="submenu-item">
                  <!-- Add [routerLink] directive to manage navigation -->
                  <a [routerLink]="subItem.state">{{ subItem.name }}</a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <div class="container">
    <!-- This is where the routed components will be displayed -->
    <router-outlet></router-outlet>
  </div>

解决方案 #

核心思路是通过menuItem.active状态控制主菜单项的显示/隐藏，当菜单项被激活（点击后），隐藏主标题，只显示子菜单。

修改online.html模板 #

给主菜单的div元素添加*ngIf="!menuItem.active"条件，这样激活状态下主标题会自动隐藏：

<div class="container text-center" *ngIf="nav">
    <div class="sideBar">
      <div class="menu-content">
        <ul class="menu-items">
          <li class="item" *ngFor="let menuItem of nav; let i = index">
            <!-- 仅当菜单未激活时显示主标题 -->
            <div class="menu-item" (click)="toggleSubMenu(i)" *ngIf="!menuItem.active">
              <span class="title">{{ menuItem.name }}</span>
            </div>
            <ul class="submenu" *ngIf="menuItem.active">
              <li class="subitem" *ngFor="let subItem of menuItem.sub">
                <div class="submenu-item">
                  <a [routerLink]="subItem.state">{{ subItem.name }}</a>
                </div>
              </li>
              <!-- 可选：添加返回按钮，点击回到主菜单 -->
              <li class="subitem" (click)="toggleSubMenu(i)">
                <div class="submenu-item">← 返回主菜单</div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <div class="container">
    <router-outlet></router-outlet>
  </div>

逻辑层说明 #

现有toggleSubMenu方法已经实现了单菜单项激活的逻辑（点击某一项时，其他项自动取消激活），无需额外修改。添加返回按钮后，点击返回会触发同样的toggleSubMenu方法，将当前菜单项的active状态设为false，从而重新显示主标题、隐藏子菜单。

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