Angular路由：初始加载时routerLinkActive默认选中状态不生效求助

这个问题的核心原因很明确：你的默认子路由是空路径path: ""，但你的routerLink指向的是./activitydashboard。初始加载时，当前路由是/adminsidebar（对应空子路由），和routerLink指定的路径不匹配，所以rla.isActive初始会是false，只有当你切换到activitydashboard路由后，路径才会匹配，状态才会更新。

下面给你两种可行的解决方案：

方案一：修改路由配置（推荐） #

把默认的空子路由改成重定向到activitydashboard，这样初始加载时路由会自动跳转到/adminsidebar/activitydashboard，和你的routerLink路径完全匹配，routerLinkActive就能正确标记激活状态。

修改后的路由代码：

export const routes: Routes = [{ 
  path: "adminsidebar", 
  canActivate: [AuthGuardService], 
  component: SidebarComponent, 
  children: [ 
    // 将原空路径组件替换为重定向
    { path: "", redirectTo: "activitydashboard", pathMatch: "full" }, 
    { path: "activitydashboard", component: ActivityDashboardComponent }, 
    { path: "therapistdashboard", component: TherapistDashboardComponent }, 
    { path: "reviewapprovaldashboard", component: ReviewApprovalComponent }, 
    { path: "feedbackdashboard", component: FeedbackComponent }, 
    { path: "clientdashboard", component: ClientdashboardComponent }
  ]
}]

这样修改后，用户访问/adminsidebar时会自动跳转到/adminsidebar/activitydashboard，初始加载时rla.isActive就会是true，对应的白色图片也会正常显示。

方案二：通过代码手动判断路由状态（无需修改路由） #

如果你不想调整路由结构，可以在组件类中通过ActivatedRoute和Router来手动判断当前路由是否属于ActivityDashboard的范围，然后用一个自定义变量来控制图片显示。

组件类代码： #

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

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

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

  ngOnInit(): void {
    // 初始加载时检查当前路由
    this.checkActivityRouteStatus();

    // 订阅路由变化，实时更新状态
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.checkActivityRouteStatus();
    });
  }

  private checkActivityRouteStatus(): void {
    const currentChildPath = this.route.firstChild?.snapshot.url.map(segment => segment.path).join('/');
    // 匹配空路径（默认路由）和activitydashboard路径
    this.isActivityActive = currentChildPath === '' || currentChildPath === 'activitydashboard';
  }
}

修改模板代码： #

把模板中所有的rla.isActive替换为自定义的isActivityActive变量：

<li id="activity" 
    [routerLink]="['./activitydashboard']" 
    [routerLinkActive]="['Active']" 
    [ngClass]="isActivityActive?'active':''" 
    class="Active pointer">
 <p class="link-items pointer">
 <img *ngIf="!isActivityActive" src="/assets/img/activity-blue-retina.png" class="links-img" alt="">
 {{ isActivityActive }}
 <img *ngIf="isActivityActive" src="/assets/img/activity-white-retina.png" class="links-img" data-srcset="/assets/img/activity-white@2x.png,/assets/img/activity-white@3x.png" alt="">
 <span class="list-labels"> Activity </span>
 </p>
</li>

这样即使初始路由是空路径，代码也会识别出这是ActivityDashboard的默认路由，将isActivityActive设为true，图片就能正常显示了。

内容的提问来源于stack exchange，提问作者Jayna Tanawala