Angular12中如何手动切换Admin LTE 3的左侧侧边栏？

问题原因 #

你自定义按钮触发右侧侧边栏的核心原因是data-widget属性配置错误：
data-widget="control-sidebar"是Admin LTE 3中专门用于控制右侧控制侧边栏的标识，和左侧主侧边栏的控制逻辑完全独立，所以自然不会操作左侧菜单。

解决方案 #

共有两种实现方式，可根据你的需求选择：

方式1：原生属性配置（最简单） #

直接修改自定义按钮的data-widget属性值为pushmenu即可，和Admin LTE自带的汉堡菜单按钮逻辑完全一致，会自动处理左侧侧边栏的展开/收起：

<a class="nav-link" data-widget="pushmenu" href="#" role="button">切换左侧侧边栏</a>

方式2：手动调用API（适合需要自定义交互逻辑的场景） #

Admin LTE 3的侧边栏组件提供了公开的调用方法，你可以在自定义逻辑里主动触发切换：

jQuery调用（Admin LTE默认依赖jQuery）

// 切换侧边栏状态
$('[data-widget="pushmenu"]').PushMenu('toggle');

// 强制收起侧边栏
$('[data-widget="pushmenu"]').PushMenu('collapse');

// 强制展开侧边栏
$('[data-widget="pushmenu"]').PushMenu('expand');

原生JS调用（适配框架场景）

如果你的项目是Angular/React/Vue这类框架，不想直接依赖jQuery，也可以直接切换body上的控制类实现，效果完全一致：

// 切换侧边栏状态
document.body.classList.toggle('sidebar-collapse');

// 强制收起
document.body.classList.add('sidebar-collapse');

// 强制展开
document.body.classList.remove('sidebar-collapse');

补充说明 #

你代码中sidebar组件上配置的sidebar-no-expand类是用于控制侧边栏收起状态下，鼠标hover时是否自动展开的配置，不影响上述切换逻辑，不需要可以直接移除。

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