1. 创建一个包含导航标签的组件，并将其添加到导航文件中。例如：

2. 在每个子组件中，使用以下代码来设置当前活动路由链接的CSS类：

import { Component } from '@angular/core'; import { Router } from '@angular/router';

@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent {

constructor(private router: Router) { }

ngOnInit() { this.router.events.subscribe((event) => { if (event instanceof NavigationEnd) { let currentUrl = this.router.url; if (currentUrl === '/home') { document.getElementById('homeTab').classList.add('active'); } else { document.getElementById('homeTab').classList.remove('active'); } } }); }

}

3. 在导航标签组件中，使用以下代码来设置活动CSS类：

import { Component } from '@angular/core'; import { Router } from '@angular/router';

@Component({ selector: 'app-nav', templateUrl: './nav.component.html', styleUrls: ['./nav.component.css'] }) export class NavComponent {

constructor(private router: Router) { }

ngOnInit() { this.router.events.subscribe((event) => { if (event instanceof NavigationEnd) { let currentUrl = this.router.url; if (currentUrl === '/home') { document.getElementById('homeTab').classList.add('active'); } else { document.getElementById('homeTab').classList.remove('active'); } if (currentUrl === '/about') { document.getElementById('aboutTab').classList.add('active'); } else { document.getElementById('aboutTab').classList.remove('active'); } if (currentUrl === '/contact') { document.getElementById('contactTab').classList.add('active'); } else { document.getElementById