Angular自定义CSS折叠子菜单功能异常求助

Let's tackle your two submenu problems one by one with practical, Angular-native solutions:

Problem 1: Auto-Collapse Existing Menus When Opening a New One #

Right now, each menu item manages its own open/closed state independently—there's no coordination between them. To fix this, we'll centralize the active menu state in the parent component so we can toggle only one menu at a time.

Solution Code: #

First, update your parent component (submenu.component.ts) to track the currently active menu index:

import { Component } from '@angular/core';

@Component({
  selector: 'app-submenu',
  templateUrl: './submenu.component.html',
  styleUrls: ['./submenu.component.css']
})
export class SubmenuComponent {
  listsvalue = []; // Replace with your actual menu data
  activeMenuIndex: number | null = null;

  setActiveMenu(index: number) {
    // Toggle current menu if clicked again, else switch to new menu
    this.activeMenuIndex = this.activeMenuIndex === index ? null : index;
  }
}

Then modify your template to bind the active state and trigger the menu switch on click:

<aside class="main-sidebar">
  <section class="sidebar">
    <ul class="sidebar-menu tree" data-widget="tree">
      <li 
        [class.active]="activeMenuIndex === i"
        (click)="setActiveMenu(i)"
        *ngFor="let data of listsvalue; let i = index"
      >
        <a>
          <span>{{data.value}}</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="nav submenu" data-widget="tree">
          <!-- Submenu items go here -->
        </ul>
      </li>
    </ul>
  </section>
</aside>

You can now remove the checkToggle directive entirely if you want, since we're handling the state centrally.

Problem 2: Main Menu Collapses When Clicking Submenu Items #

This happens because click events bubble up from the submenu to the parent menu item, triggering its toggle logic. We can fix this by either stopping event propagation or checking the click target in our toggle handler.

Quick Fix (Stop Propagation): #

Add $event.stopPropagation() to your submenu links to prevent the click from reaching the parent menu:

<ul class="nav submenu" data-widget="tree">
  <li *ngFor="let test of data.value ">
    <a (click)="$event.stopPropagation()">
      <span>{{test.value}}</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
  </li>
</ul>

Alternative Fix (Check Click Target in Directive): #

If you want to keep using your checkToggle directive, update it to ignore clicks originating from the submenu:

import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core';

@Directive({ selector: '[checkToggle]' })
export class SidebarLeftToggleDirective {
  @HostBinding("class.active") isOpen = false;

  constructor(public elementRef: ElementRef) { }

  @HostListener("click", ["$event"]) toggleOpen(event: MouseEvent) {
    // Only toggle if the click didn't come from the submenu
    const clickedInSubmenu = (event.target as HTMLElement).closest('.submenu') !== null;
    if (!clickedInSubmenu) {
      this.isOpen = !this.isOpen;
    }
  }
}

Combining Both Fixes #

If you stick with the centralized state approach from Problem 1, you don't need the original directive at all—everything is handled in the parent component, and the stop propagation on submenu clicks will prevent unwanted menu collapses.

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