Angular使用routerLink导航时组件重复初始化问题及解决方法

这确实是Angular路由的预期行为哦。默认情况下，Angular每次导航到一个新的路由路径时，都会销毁之前的组件实例并创建目标组件的新实例，所以你每次回到ResultComponent时，ngOnInit都会触发，控制台打印"created"完全符合默认逻辑。

如果你想阻止组件重复初始化，也就是让组件实例被复用，这里有两种常用的解决方案：

方案一：自定义RouteReuseStrategy（推荐，灵活可控） #

Angular提供了RouteReuseStrategy接口，允许我们自定义路由组件的复用规则。你可以针对特定路由（比如你的/results）保存组件实例，下次导航回来时直接复用，而不是重新创建。

1. 创建自定义复用策略类 #

新建一个文件（比如custom-route-reuse-strategy.ts），实现RouteReuseStrategy接口：

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  // 存储需要复用的路由组件实例
  private storedRoutes = new Map<string, DetachedRouteHandle>();

  // 判断当前路由是否应该复用（默认逻辑：路由配置相同则复用）
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

  // 判断是否应该分离当前路由（只对/results路由进行保存）
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return route.routeConfig?.path === 'results';
  }

  // 保存路由对应的组件实例
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    if (route.routeConfig?.path) {
      this.storedRoutes.set(route.routeConfig.path, handle);
    }
  }

  // 判断是否应该恢复之前保存的组件实例
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.routeConfig?.path && this.storedRoutes.has(route.routeConfig.path);
  }

  // 获取保存的组件实例
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return this.storedRoutes.get(route.routeConfig?.path || '') || null;
  }
}

2. 在AppModule中注册自定义策略 #

修改app.module.ts，把默认的RouteReuseStrategy替换成我们自定义的：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy'; // 注意路径要正确
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';
import { ResultComponent } from './pages/result/result.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ResultComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样配置后，当你从Home导航到Results再返回，ResultComponent的实例会被复用，ngOnInit不会再次触发。

方案二：将组件移出路由出口，用*ngIf控制显示（简单直接） #

如果只是针对ResultComponent这一个组件，你可以把它放在路由出口外面，通过路由状态来控制显示隐藏，这样组件只会初始化一次。

修改AppComponent的HTML #

<div class="collapse navbar-collapse">
 <ul class="nav navbar-nav">
 <li routerLinkActive="active" class="nav-item">
 <a class="nav-link" routerLink="/home">Home </a>
 </li>
 <li routerLinkActive="active" class="nav-item">
 <a class="nav-link" routerLink="/results">Results</a>
 </li>
 </ul>
</div>

<!-- 路由出口只渲染Home组件 -->
<router-outlet *ngIf="router.url !== '/results'"></router-outlet>

<!-- Result组件直接放在外面，根据路由路径显示/隐藏 -->
<app-result *ngIf="router.url === '/results'"></app-result>

在AppComponent中注入Router #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public router: Router) {}
}

这种方式下，ResultComponent只会在AppComponent初始化时创建一次，后续切换路由只是显示或隐藏它，不会重新初始化。

两种方案各有优劣：方案一适合需要复用多个路由组件的场景，扩展性强；方案二更简单，适合单个组件的需求，你可以根据自己的实际代码情况选择。

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