Angular结合Bootstrap实现侧边栏子菜单时初始箭头显示状态异常问题

你好！我看了你遇到的问题——作为Angular新手，用Bootstrap做侧边栏垂直菜单带子菜单时，初始箭头本该指向右侧（对应子菜单隐藏状态），但页面加载时却变成向下了，点击后又能正常切换。这个问题其实是Bootstrap的collapse组件初始类绑定的小问题，我来帮你解决~

问题原因分析 #

你的CSS逻辑是完全正确的：.nav-link[data-bs-toggle].collapsed:after对应子菜单折叠状态（箭头向右），.nav-link[data-bs-toggle]:not(.collapsed):after对应子菜单展开状态（箭头向下）。但初始渲染时，带有data-bs-toggle="collapse"的导航链接没有自动加上collapsed类，导致CSS匹配到了:not(.collapsed)的规则，所以箭头错误显示成向下。

Bootstrap的collapse插件本来会在页面加载时，根据目标折叠面板的状态（是否有show类）给触发按钮自动添加/移除collapsed类，但在Angular环境中，由于组件生命周期和原生Bootstrap初始化的时序冲突，这个类可能没有及时被添加上，才导致了初始样式错误。

解决方案：手动添加初始collapsed类 #

最简单直接的办法，就是给那些带有data-bs-toggle="collapse"的导航链接，手动加上collapsed类——因为初始时你的子菜单是折叠状态（<ul>只有collapse类，没有show），所以触发按钮就应该处于collapsed状态。

修改你菜单代码中对应的两个导航项：

Logs项修改前：

<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
  <i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Logs </span>
</a>

Logs项修改后：

<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle collapsed">
  <i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Logs </span>
</a>

Products项修改前：

<a href="#submenu3" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
  <i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm inline">Products</span> 
</a>

Products项修改后：

<a href="#submenu3" data-bs-toggle="collapse" class="nav-link px-0 align-middle collapsed">
  <i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm inline">Products</span> 
</a>

效果验证 #

修改后，页面初始加载时，这两个导航项的箭头会匹配.collapsed的CSS规则，显示向右的图标；点击后，Bootstrap会自动移除collapsed类，箭头切换为向下，子菜单展开，完全符合你的预期。

另外，如果后续还遇到类似Bootstrap和Angular交互的问题，也可以考虑使用专门适配Angular的ng-bootstrap库，它会更贴合Angular的组件生命周期，减少这类原生JS初始化的时序问题~

备注：内容来源于stack exchange，提问作者MAMMIA