Angular 14中cPanel侧边栏折叠菜单功能失效求助

针对你在Angular 14中搭建cPanel风格侧边栏时，Account Settings折叠菜单无法展开的问题，以下是几种直接的解决方案：

1. 改用Angular原生属性绑定控制折叠 #

静态HTML的类选择器事件绑定在Angular中可能不生效，直接用Angular的属性绑定和事件绑定实现折叠逻辑：

修改后的模板代码 #

<li class="menu-item" [class.open]="isAccountSettingsOpen">
  <a href="javascript:void(0);" class="menu-link menu-toggle" (click)="isAccountSettingsOpen = !isAccountSettingsOpen">
    <i class="menu-icon tf-icons bx bx-dock-top"></i>
    <div data-i18n="Account Settings">Account Settings</div>
  </a>
  <ul class="menu-sub" [style.display]="isAccountSettingsOpen ? 'block' : 'none'">
    <li class="menu-item">
      <a routerLink="/pages-account-settings-account" class="menu-link">
        <div data-i18n="Account">Account</div>
      </a>
    </li>
    <li class="menu-item">
      <a routerLink="/pages-account-settings-notifications" class="menu-link">
        <div data-i18n="Notifications">Notifications</div>
      </a>
    </li>
  </ul>
</li>

组件类添加变量 #

在对应的侧边栏组件.ts文件中定义控制变量：

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

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
  isAccountSettingsOpen: boolean = false;
}

注意：把原代码中的href替换为Angular的routerLink，避免触发页面刷新，符合单页应用的路由逻辑。

2. 初始化第三方UI框架的折叠逻辑 #

如果你的侧边栏基于第三方Admin模板（如CoreUI、NgAdmin等），需确保在组件初始化时调用框架的菜单初始化方法：

import { AfterViewInit, Component } from '@angular/core';
declare var $: any; // 若模板依赖jQuery

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 绑定折叠菜单的点击事件
    $('.menu-toggle').on('click', function() {
      $(this).parent().toggleClass('open');
      $(this).next('.menu-sub').slideToggle();
    });
  }
}

若使用jQuery，需先在angular.json的scripts数组中引入jQuery脚本，或通过npm安装后导入。

3. 检查并修复CSS样式 #

确保折叠菜单的基础样式正确，全局或组件CSS中添加：

/* 默认隐藏子菜单 */
.menu-sub {
  display: none;
  list-style: none;
  padding-left: 1rem;
}

/* 展开时显示子菜单 */
.menu-item.open .menu-sub {
  display: block;
}

4. 阻止事件冒泡（可选） #

如果点击折叠按钮时触发了父元素的其他事件，导致折叠失效，可在点击事件中阻止冒泡：

<a href="javascript:void(0);" class="menu-link menu-toggle" (click)="isAccountSettingsOpen = !isAccountSettingsOpen; $event.stopPropagation()">

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