如何在Angular 5中使用Bootstrap侧边导航栏与路由？含迁移方案

Hey there! Let's work through your Angular 5 migration questions—since you're coming from AngularJS 1.x, the component-based shift can feel tricky at first, but it's actually more structured once you get the hang of it. Here's how to tackle each part:

In AngularJS 1.x, you might have had the navbar tied to a module or directive. In Angular 5, we'll turn this into a standalone component—this keeps your code modular and reusable across your app.

• First, generate a new navbar component with Angular CLI (it saves tons of setup time!):

  ng generate component navbar
  

• Open navbar.component.html and paste your Bootstrap navbar markup here. For example:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">My App</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
      </ul>
    </div>
  </nav>
  

• To use this navbar in your app, just add the component selector <app-navbar></app-navbar> inside app.component.html—this replaces the old AngularJS way of including templates via ng-include or directives.

The key here is swapping Bootstrap's regular href with Angular's routerLink directive (it handles client-side routing without full page reloads). We'll also use routerLinkActive to automatically highlight the active menu item.

• First, set up your routing in app-routing.module.ts:

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { HomeComponent } from './home/home.component';
  import { ServicesComponent } from './services/services.component';
  
  const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'services', component: ServicesComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

• Update your sidebar markup (we'll put this in a sidebar.component.html) to use routing:

  <div class="sidebar bg-light">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link" routerLink="/" routerLinkActive="active">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/services" routerLinkActive="active">Services</a>
      </li>
    </ul>
  </div>
  

• Add a quick CSS rule to match Bootstrap's active link style:

  .nav-link.active {
    color: #fff;
    background-color: #007bff;
  }
  

• Don't forget to add <router-outlet></router-outlet> in app.component.html—this is where your routed components will render.

Absolutely! You have a few flexible options here:

Option 1: Pure Bootstrap Navbar #

We covered this in the first section—just wrap your Bootstrap markup in an Angular component, then pair it with Angular routing as shown above. Make sure you've added Bootstrap CSS to your project (either via CDN in index.html or installed via npm).

Option 2: Angular Material Navbar #

Angular Material has purpose-built navigation components that integrate seamlessly with Angular 5. Here's a quick example using mat-toolbar and mat-sidenav:

• First, install Angular Material and import the required modules in app.module.ts:

  import { MatToolbarModule, MatSidenavModule, MatListModule, MatIconModule } from '@angular/material';
  
  @NgModule({
    imports: [
      // ... other imports
      MatToolbarModule,
      MatSidenavModule,
      MatListModule,
      MatIconModule
    ]
  })
  

• Then, your navigation component markup could look like this:

  <mat-toolbar color="primary">
    <button mat-icon-button (click)="sidenav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    <span>My Material App</span>
  </mat-toolbar>
  
  <mat-sidenav-container class="sidenav-container">
    <mat-sidenav #sidenav mode="side">
      <mat-nav-list>
        <a mat-list-item routerLink="/" routerLinkActive="active">Home</a>
        <a mat-list-item routerLink="/services" routerLinkActive="active">Services</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
  

Option 3: Mix Bootstrap + Material #

You can also combine Bootstrap's grid/layout system with Angular Material components for navigation—just keep an eye out for conflicting CSS classes (you might need to tweak styles if they overlap).

内容的提问来源于stack exchange，提问作者Mohammed Mohideen M Z