Angular 7集成Bootstrap导航栏无法自动关闭及动态激活问题

Hey there! Let's work through your two navbar issues step by step—these are super common when combining Angular with Bootstrap, so you’re not hitting anything unusual here.

1. Fixing the Navbar Not Closing on Click #

The problem here is that Bootstrap’s collapse component relies on full page reloads or specific DOM events to toggle closed, but Angular uses client-side routing (no page refresh). Your data-toggle="collapse" attribute isn’t playing well with Angular’s router behavior, so the menu stays open after clicking a link. Here’s how to fix it:

Step 1: Add a Click Handler to Close the Menu

First, add a template reference to your collapse container and a click event to each nav link:

<!-- Add #navbarMenu to the collapse div -->
<div class="collapse navbar-collapse" id="navbarMenu" #navbarMenu>
  <ul class="navbar-nav ml-auto nav-pills">
    <li class="nav-item">
      <a class="nav-link text-white" routerLink="/" (click)="closeNavbar()">Home</a>
    </li>
    <!-- Repeat (click)="closeNavbar()" for other links -->
  </ul>
</div>

Step 2: Update Your Component TypeScript

Add a method to trigger Bootstrap’s collapse hide function, plus a listener to close the menu when clicking outside it:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('navbarMenu') navbarMenu!: ElementRef;

  ngOnInit() {
    // Close menu when clicking outside the navbar area
    document.addEventListener('click', (event) => {
      const navbarToggler = document.querySelector('.navbar-toggler');
      const menuElement = this.navbarMenu.nativeElement;
      
      if (menuElement.classList.contains('show') && 
          !navbarToggler?.contains(event.target) && 
          !menuElement.contains(event.target)) {
        $(menuElement).collapse('hide');
      }
    });
  }

  closeNavbar() {
    // Close menu when clicking a nav link
    $(this.navbarMenu.nativeElement).collapse('hide');
  }
}

2. Setting Active Nav Pills Dynamically with Routes #

Angular has a built-in directive called RouterLinkActive that handles exactly this—it adds a CSS class to the active route link, which we can use with Bootstrap’s active class for nav pills.

Update Your Nav Links

Add routerLinkActive="active" to each link, plus [routerLinkActiveOptions]="{exact: true}" for the home route (to avoid partial route matches):

<ul class="navbar-nav ml-auto nav-pills">
  <li class="nav-item">
    <a class="nav-link text-white" 
       routerLink="/" 
       routerLinkActive="active" 
       [routerLinkActiveOptions]="{exact: true}"
       (click)="closeNavbar()">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-white-80" 
       routerLink="/skills" 
       routerLinkActive="active"
       (click)="closeNavbar()">Skills</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-white-80" 
       routerLink="/projects" 
       routerLinkActive="active"
       (click)="closeNavbar()">Projects</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-white-80" 
       routerLink="/socials" 
       routerLinkActive="active"
       (click)="closeNavbar()">Socials</a>
  </li>
</ul>

Tweak the Active Link Styling

To make the active link’s text white (matching your home link), add this to your app.component.css:

.nav-link.active {
  color: white !important;
}

Quick Check: Ensure RouterModule is Set Up #

Double-check that your AppModule has routing configured correctly. You should have something like this:

import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
// Import your other components here

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'skills', component: SkillsComponent },
  { path: 'projects', component: ProjectsComponent },
  { path: 'socials', component: SocialsComponent },
  { path: '**', redirectTo: '' } // Redirect unknown routes to home
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Then import AppRoutingModule into your main AppModule.

That should solve both issues—your navbar will close when clicking links or outside the menu, and the active pill will update automatically with your route!

内容的提问来源于stack exchange，提问作者Sid Sun