Angular 5中如何根据组件为导航栏动态添加指定类（Bootstrap 4）

嘿，我来给你分享几个简单可行的实现方法，刚好之前做过类似的需求，适配你的Angular 5项目和Bootstrap 4完全没问题～

方法一：通过路由监听动态控制类名 #

这是最直接的方式，我们可以在导航栏组件里监听路由变化，判断当前是否是首页，然后动态绑定bg-primary类。

步骤1：在导航栏组件中注入Router #

首先在你的导航栏组件（比如NavbarComponent）里引入Router并注入：

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  isHomePage = false;

  constructor(private router: Router) { }

  ngOnInit(): void {
    // 监听路由结束事件，避免重复触发
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 根据你的首页路由路径调整判断条件，这里假设首页是 '/' 或 '/home'
      this.isHomePage = event.url === '/' || event.url === '/home';
    });
  }
}

步骤2：在模板中动态绑定类 #

然后在导航栏的模板里，用Angular的属性绑定来控制bg-primary类的添加：

<nav class="navbar navbar-expand-lg" [class.bg-primary]="!isHomePage">
  <!-- 导航栏核心内容 -->
  <a class="navbar-brand" routerLink="/">My App</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLink="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

这样一来，首页路由时isHomePage为true，不会添加bg-primary类（导航栏保持透明）；其他路由时自动加上该类，导航栏变为Bootstrap的primary背景色。

方法二：利用路由配置的data字段标记页面类型 #

如果想让配置更灵活，后续新增页面时不用修改导航栏组件代码，可以在路由配置里给页面加标记，再在导航栏中读取。

步骤1：修改路由配置 #

在app-routing.module.ts里给每个路由添加data字段标记是否为首页：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent, data: { isHome: true } },
  { path: 'about', component: AboutComponent, data: { isHome: false } },
  { path: 'contact', component: ContactComponent, data: { isHome: false } },
  { path: '**', redirectTo: '' }
];

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

步骤2：在导航栏组件中读取路由data #

然后在导航栏组件里通过ActivatedRoute获取当前路由的标记：

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  isHomePage = false;

  constructor(private router: Router, private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => {
        // 嵌套路由时需要找到最底层的路由节点
        let route = this.activatedRoute.firstChild;
        while (route?.firstChild) {
          route = route.firstChild;
        }
        return route?.data || {};
      })
    ).subscribe(data => {
      this.isHomePage = data.isHome || false;
    });
  }
}

模板部分和方法一完全一致，后续新增页面时只需要在路由配置里设置isHome字段即可，非常方便。

额外提示：自定义bg-primary颜色 #

如果Bootstrap默认的bg-primary蓝色不符合你要的黑色需求，可以在全局样式文件里覆盖这个类：

.bg-primary {
  background-color: #000 !important;
}

这样所有使用bg-primary的元素都会变成黑色背景啦。

内容的提问来源于stack exchange，提问作者Abhishek Chatterjee