按Angular 从组件的 bootstrap 选项卡中删除活动类

这里有一个更好的方法来同步活动的子元素，这将甚至当我们刷新屏幕时工作，我们可以订阅路由事件，最好是NavigationEnd，然后获得当前的firstChild路径.另外，解决问题的方法可能是从html中删除活动类.

完整代码

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  ActivatedRoute,
  provideRouter,
  Router,
  RouterModule,
  NavigationEnd,
} from '@angular/router';
import { filter } from 'rxjs/operators';
import 'zone.js';
import { CategoriesComponent } from './categories/categories.component';
import { ProductDetailsComponent } from './product-details/product-details.component';
import { ProductsComponent } from './products/products.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <nav #nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
      <button class="nav-link" id="nav-categories-tab" data-bs-toggle="tab" data-bs-target="#nav-categories" type="button" role="tab" aria-controls="nav-categories" aria-selected="true" (click)="showCategories()" [ngClass]="{ 'active':activeTab==='categories'}">Categories</button>     
      <button class="nav-link" id="nav-product-lists-tab" data-bs-toggle="tab" data-bs-target="#nav-product-lists" type="button" role="tab" aria-controls="nav-product-lists" aria-selected="false" (click)="showProducts()" [ngClass]="{ 'active':activeTab==='products'}">Products</button>
      <button class="nav-link" id="nav-product-details-tab" data-bs-toggle="tab" data-bs-target="#nav-product-details" type="button" role="tab" aria-controls="nav-product-details" aria-selected="false" (click)="showProductDetails()" [ngClass]="{ 'active':activeTab==='product-details'}">Product Details</button>
     </div>
     <router-outlet/>
  </nav>
  `,
})
export class App {
  activeTab = 'categories';
  constructor(private router: Router, private route: ActivatedRoute) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.activeTab = this.route?.snapshot?.firstChild?.routeConfig?.path.split("/")[0] || '';
    })
  }
  showCategories() {
    this.router.navigate(['categories'], { relativeTo: this.route });
  }
  showProducts() {
    this.router.navigate(['products'], { relativeTo: this.route });
  }
  showProductDetails() {
    this.router.navigate(['product-details'], { relativeTo: this.route });
  }
}

bootstrapApplication(App, {
  providers: [
    provideRouter([
      { path: 'categories', component: CategoriesComponent },
      { path: 'products', component: ProductsComponent },
      { path: 'product-details', component: ProductDetailsComponent },
      { path: '', redirectTo: 'categories', pathMatch: 'full' },
    ]),
  ],
});

stackblitz个