Angular路由切换时NgOnInit重复触发致导航栏闪烁的解决求助

我在Angular项目里用带routerLink的按钮切换视图到<router-outlet>，但每次点击路由链接，MainComponent的ngOnInit都会反复触发，导致重复从API拉取用户信息，导航栏频繁闪烁，求解决办法。

我的现有代码结构 #

主组件模板（含侧边栏和路由出口）

<div style="padding-left: 20px; padding-top: 20px;" > 
  <router-outlet></router-outlet> 
</div> 
<mat-drawer #drawer class="example-sidenav" mode="side" opened=true> 
  <div> 
    <mat-divider style="width: 100%"></mat-divider> 
  </div> 
  <br> 
  <div> 
    <button mat-fab color="warn" [routerLink]="['/account']"> 
      <mat-icon color="white">accessibility</mat-icon> 
    </button> 
  </div> 
  <br> 
  <div> 
    <button mat-fab color="warn" [routerLink]="['/others']"> 
      <mat-icon color="white">accessibility</mat-icon> 
    </button> 
  </div> 
</mat-drawer>

MainComponent的ngOnInit逻辑（获取用户信息）

ngOnInit() { 
  debugger; 
  this.userService.getUserInfo() 
    .subscribe((data: any) => { 
      this.userInfo = data; 
      this.userInfo.SignInTime = localStorage.getItem('signInTime'); 
      console.log(this.userInfo); 
    }); 
}

导航栏显示用户信息的模板

<span>{{userInfo?.FirstName}} {{userInfo?.LastName}} | </span>

当前路由配置

export const appRoutes: Routes = [ 
  {path: 'main', component: MainComponent, canActivate: [AuthGuard]}, 
  {path: 'account', component: MainComponent, children: [ 
    {path: '', component: AccountComponent} 
  ] }, 
  {path: 'others', component: MainComponent, children: [ 
    {path: '', component: OthersComponent} 
  ] }, 
  {path: 'register', component: RegisterloginComponent, children: [ 
    {path: '', component: RegisterComponent} 
  ] }, 
  {path: 'login', component: RegisterloginComponent, children: [ 
    {path: '', component: LoginComponent} 
  ] }, 
  {path: '', redirectTo: '/login', pathMatch: 'full'} 
];

问题根源分析 #

你的路由配置是核心问题！你把/account和/others都定义成了独立路由，并且它们的关联组件都是MainComponent。这意味着每次点击这些路由链接时，Angular都会重新创建一个全新的MainComponent实例，自然会反复执行ngOnInit，导致重复请求API和导航栏闪烁。

正确的思路应该是把MainComponent作为父路由容器，account和others作为它的子路由——这样MainComponent只会初始化一次，切换子路由时只会更新<router-outlet>里的子组件，父组件不会被销毁重建。

具体修正步骤 #

1. 重构路由配置

修改路由，将account和others设为main路由的子路由：

export const appRoutes: Routes = [ 
  {
    path: 'main', 
    component: MainComponent, 
    canActivate: [AuthGuard],
    children: [
      {path: 'account', component: AccountComponent},
      {path: 'others', component: OthersComponent},
      // 可选：设置默认子路由，进入/main时自动加载AccountComponent
      {path: '', redirectTo: 'account', pathMatch: 'full'}
    ]
  }, 
  {path: 'register', component: RegisterloginComponent, children: [ 
    {path: '', component: RegisterComponent} 
  ] }, 
  {path: 'login', component: RegisterloginComponent, children: [ 
    {path: '', component: LoginComponent} 
  ] }, 
  {path: '', redirectTo: '/login', pathMatch: 'full'} 
];

2. 更新routerLink路径

因为account和others现在是main的子路由，需要调整按钮的路由路径：

<div> 
  <button mat-fab color="warn" [routerLink]="['/main/account']"> 
    <mat-icon color="white">accessibility</mat-icon> 
  </button> 
</div> 
<br> 
<div> 
  <button mat-fab color="warn" [routerLink]="['/main/others']"> 
    <mat-icon color="white">accessibility</mat-icon> 
  </button> 
</div>

如果当前已经处于main路由下，也可以用相对路径简化：

<button mat-fab color="warn" [routerLink]="['account']">...</button>
<button mat-fab color="warn" [routerLink]="['others']">...</button>

3. （可选）优化用户信息获取逻辑（彻底避免重复请求）

即使路由修正后不会重复初始化MainComponent，也建议把用户信息的获取和缓存逻辑放到服务中，确保整个应用只请求一次API，且数据可复用：

在UserService中添加缓存逻辑：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, tap } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  private userInfoSubject = new BehaviorSubject<any>(null);
  public userInfo$ = this.userInfoSubject.asObservable();

  constructor(private http: HttpClient) {}

  getUserInfo(): Observable<any> {
    // 已有缓存数据则直接返回
    if (this.userInfoSubject.value) {
      return this.userInfo$;
    }
    // 无缓存则请求API并缓存结果
    return this.http.get('/api/user/info').pipe(
      tap(data => {
        data.SignInTime = localStorage.getItem('signInTime');
        this.userInfoSubject.next(data);
      })
    );
  }
}

然后在MainComponent中订阅：

ngOnInit() { 
  this.userService.getUserInfo().subscribe(data => {
    this.userInfo = data;
    console.log(this.userInfo);
  });
}

这样哪怕因为特殊情况MainComponent重新初始化，也不会重复发起API请求，直接使用缓存数据。

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