Angular中Bootstrap导航栏折叠功能失效问题求助

兄弟，我之前在Angular项目里也踩过Bootstrap折叠按钮的坑，给你梳理几个最可能的原因和解决办法：

1. 确保依赖库正确安装并引入 #

Bootstrap的折叠功能依赖jQuery和Popper.js，Angular不会自动帮你引入这些，得手动来：

首先安装依赖：

npm install jquery popper.js bootstrap --save

然后修改你的angular-cli.json（Angular 4用的是这个配置文件，不是后来的angular.json），在scripts数组里按顺序引入这三个JS文件（顺序不能错，jQuery必须在最前面）：

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/popper.js/dist/umd/popper.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

同时别忘了在styles数组里引入Bootstrap的CSS：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.css"
]

改完配置后一定要重启Angular开发服务器，不然配置不会生效！

2. 检查HTML结构是否完整 #

你的按钮用了data-target="#navbarSupportedContent"，那必须要有对应的折叠容器，而且容器的类和ID要正确匹配：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- 必须有这个带ID和collapse类的容器 -->
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">首页</a>
      </li>
      <!-- 其他导航项 -->
    </ul>
  </div>
</nav>

如果你的折叠容器用了*ngIf来控制显示，会导致DOM被移除，Bootstrap的JS找不到元素，这种情况建议换成[hidden]或者用Bootstrap的API来控制折叠状态。

3. 避免组件隔离导致的DOM问题 #

如果你的汉堡按钮和导航菜单分属不同的Angular组件，Bootstrap的DOM选择器可能找不到目标元素（因为组件的DOM是隔离的）。这种情况最好把导航的按钮和菜单放在同一个组件里，或者手动用Bootstrap的JS方法来触发折叠：

在组件类里注入ElementRef，然后手动调用折叠方法：

import { Component, ElementRef, OnInit } from '@angular/core';

declare var $: any; // 声明jQuery，避免类型报错

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit() {
    // 手动初始化折叠组件
    $(this.el.nativeElement).find('.navbar-toggler').click(() => {
      $('#navbarSupportedContent').collapse('toggle');
    });
  }

}

按上面的步骤排查，基本就能解决汉堡按钮失效的问题啦！

内容的提问来源于stack exchange，提问作者abstract christmas tree