Angular中Bootstrap导航栏移动端点击跳转后无法自动关闭问题

这个问题我之前也碰到过，原因很简单：Bootstrap的折叠导航栏默认是靠原生JS监听导航链接的点击事件来关闭菜单，但Angular的routerLink是单页面路由跳转，不会触发页面刷新，也不会触发Bootstrap原生的关闭逻辑，所以点击导航项后路由跳转成功了，但菜单还保持展开状态。

下面给你几个实用的解决方案，按推荐程度排序：

方案1：监听路由变化自动关闭导航栏（最通用） #

这个方法一劳永逸，只要路由发生跳转，就自动检查并关闭展开的导航栏，不管是从哪个导航项跳的都有效。

步骤： #

1. 在home.component.ts中导入需要的模块：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

2. 在组件类中添加模板引用变量的引用，并订阅路由事件：

@ViewChild('navbarCollapse') navbarCollapse!: ElementRef;

constructor(private router: Router) {}

ngOnInit() {
  // 监听路由跳转完成事件
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    const navbarElement = this.navbarCollapse.nativeElement;
    // 检查导航栏是否处于展开状态（Bootstrap 3用'in'类，Bootstrap 4+用'show'类）
    if (navbarElement.classList.contains('in')) {
      navbarElement.classList.remove('in');
      // 如果是Bootstrap 4+，替换成下面这行：
      // navbarElement.classList.remove('show');
    }
  });
}

3. 在home.html中给折叠的导航栏div添加模板引用变量：

<div #navbarCollapse id="navbar" class="navbar-collapse collapse">
  <div class="nav navbar-nav navbar-right scrollbar">
    <app-notes-list></app-notes-list>
  </div>
</div>

方案2：利用jQuery直接调用Bootstrap的Collapse方法（适合已引入jQuery的项目） #

如果你的项目已经因为Bootstrap 3依赖引入了jQuery，那这个方法更简单：

在home.component.ts中：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
// 声明jQuery变量
declare var $: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.html'
})
export class HomeComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 直接调用Bootstrap的collapse方法关闭导航栏
      $('#navbar').collapse('hide');
    });
  }
}

方案3：给每个导航项添加点击事件关闭菜单（适合导航项少的情况） #

如果你的导航项不多，可以直接在每个可点击的导航元素上添加点击事件，手动关闭菜单。不过这种方法需要组件间通信，不如前两种通用：

1. 在home.component.ts中添加关闭导航栏的方法：

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

@Component({...})
export class HomeComponent {
  @ViewChild('navbarCollapse') navbarCollapse!: ElementRef;

  closeNavbar() {
    const navbarElement = this.navbarCollapse.nativeElement;
    if (navbarElement.classList.contains('in')) {
      navbarElement.classList.remove('in');
    }
  }
}

2. 在home.html中把这个方法通过组件传值的方式传给app-notes-list，再传到app-note组件，然后在note.html中绑定点击事件：

<div class="d-flex flex-column py-4" [routerLink]="[index]" (click)="closeNavbar()" style="cursor:pointer;">

不过这种方法需要多层组件传值，比较麻烦，所以更推荐前两种方案。

你可以根据自己的项目情况选择合适的方案，亲测有效哦！

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