Angular 5及以上如何识别router-outlet加载组件并动态加类

这个需求其实很好实现，核心思路就是监听路由导航完成事件，拿到当前加载的组件类型，再动态给body或者header添加/移除对应的类名。下面是具体的步骤和代码示例：

实现步骤 #

1. 在根组件（AppComponent）中注入依赖 #

我们需要用到Router来监听路由变化，Renderer2来安全操作DOM（避免直接操作document带来的风险），另外还可以注入ElementRef来获取header元素（如果要给header加类的话）。

2. 监听路由的NavigationEnd事件 #

路由导航完成后会触发NavigationEnd事件，这时候我们就能准确拿到当前激活的路由对应的组件。同时要记得在组件销毁时取消订阅，防止内存泄漏。

3. 根据当前组件动态操作类名 #

先移除之前添加的所有自定义类（比如home、directory、notfound），再根据当前加载的组件添加对应的类。

具体代码示例 #

AppComponent的TypeScript代码 #

import { Component, OnInit, OnDestroy, Renderer2, ElementRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, Subscription } from 'rxjs';
import { HomeComponent } from './home/home.component';
import { DirectoryComponent } from './directory/directory.component';
import { NotFoundComponent } from './not-found/not-found.component';

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

  constructor(
    private router: Router,
    private renderer: Renderer2,
    private el: ElementRef
  ) {}

  ngOnInit(): void {
    // 监听路由导航完成事件
    this.routeSub = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 获取当前激活路由对应的组件
      const activeComponent = this.router.routerState.root.firstChild?.component;
      
      // 先移除所有可能的自定义类，避免类叠加
      const body = document.body;
      ['home', 'directory', 'notfound'].forEach(cls => {
        this.renderer.removeClass(body, cls);
      });

      // 如果要给header操作类，先获取header元素
      const header = this.el.nativeElement.querySelector('app-header');
      if (header) {
        ['home-header', 'directory-header'].forEach(cls => {
          this.renderer.removeClass(header, cls);
        });
      }

      // 根据当前组件添加对应类
      switch (activeComponent) {
        case HomeComponent:
          this.renderer.addClass(body, 'home');
          if (header) this.renderer.addClass(header, 'home-header');
          break;
        case DirectoryComponent:
          this.renderer.addClass(body, 'directory');
          if (header) this.renderer.addClass(header, 'directory-header');
          break;
        case NotFoundComponent:
          this.renderer.addClass(body, 'notfound');
          break;
        // 其他组件可以继续添加case
        default:
          break;
      }
    });
  }

  ngOnDestroy(): void {
    // 取消订阅，防止内存泄漏
    if (this.routeSub) {
      this.routeSub.unsubscribe();
    }
  }
}

你的现有AppComponent模板（无需修改） #

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

补充404路由配置 #

别忘了在你的路由数组里添加404的路由规则：

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'directory', component: DirectoryComponent },
  // 其他路由...
  { path: '**', component: NotFoundComponent } // 404路由放在最后
];

注意事项 #

• 一定要在组件销毁时取消路由事件的订阅，否则会导致内存泄漏。
• 使用Renderer2操作DOM是Angular推荐的方式，比直接操作document.body更安全，尤其是在服务端渲染场景下。
• 如果你的路由有嵌套，可能需要调整获取activeComponent的方式，比如通过router.routerState.root递归找到最底层的激活路由组件。

内容的提问来源于stack exchange，提问作者Rakesh Roy