如何让Angular懒加载组件在路由导航后保持存活？

你说得对——Angular默认的路由行为确实会在导航到新路由时销毁当前活跃的组件，同时触发ngOnDestroy钩子，这是因为主路由出口(<router-outlet>)的设计就是每次只渲染一个组件。不过要实现你想要的「懒加载组件在路由切换后保持存活，和新路由组件同页面展示」的需求，有几个实用的方案可以参考：

方案1：使用辅助路由（Auxiliary Routes） #

这是最贴合Angular路由设计的方案，核心是通过多个命名路由出口，让不同的路由组件在页面的不同区域同时渲染，各自管理自己的生命周期。

步骤： #

• 在你的主模板中添加一个命名的路由出口，和主出口共存：

  <!-- 主路由出口，渲染新导航的组件 -->
  <router-outlet></router-outlet>
  <!-- 命名出口，用来渲染需要保持存活的懒加载组件 -->
  <router-outlet name="persistentOutlet"></router-outlet>
  

• 在路由配置中，为你的懒加载组件配置辅助路由：

  const routes: Routes = [
    // 主路由配置
    { path: 'new-page', component: NewPageComponent },
    // 辅助路由：指定出口名称，同时配置懒加载
    {
      path: 'my-persistent-component',
      outlet: 'persistentOutlet',
      loadChildren: () => import('./persistent/persistent.module').then(m => m.PersistentModule)
    }
  ];
  

• 导航时，同时激活主路由和辅助路由：

  this.router.navigate([
    '/new-page', // 主路由路径
    { outlets: { persistentOutlet: ['my-persistent-component'] } } // 激活辅助路由
  ]);
  

这样操作后，主出口会加载NewPageComponent，而命名出口的懒加载组件会一直保持存活——除非你主动修改persistentOutlet对应的路由，否则路由切换不会触发它的ngOnDestroy。

方案2：自定义路由复用策略（RouteReuseStrategy） #

如果你的场景是需要缓存组件实例，后续再次导航回来时复用，而不是同时展示，那么自定义路由复用策略会更合适。这个方案可以让你精准控制哪些路由组件需要被缓存。

步骤： #

1. 创建自定义复用策略类，实现RouteReuseStrategy接口：

   import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';
   
   export class CustomRouteReuseStrategy implements RouteReuseStrategy {
     // 存储被缓存的组件实例
     private cachedRoutes = new Map<string, DetachedRouteHandle>();
   
     // 判断当前路由是否需要被缓存
     shouldDetach(route: ActivatedRouteSnapshot): boolean {
       // 我们通过路由data中的reuse字段来标记是否缓存
       return route.data?.reuse === true;
     }
   
     // 缓存组件实例
     store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
       const routeKey = this.getRouteUniqueKey(route);
       this.cachedRoutes.set(routeKey, handle);
     }
   
     // 判断是否可以复用缓存的组件
     shouldAttach(route: ActivatedRouteSnapshot): boolean {
       const routeKey = this.getRouteUniqueKey(route);
       return this.cachedRoutes.has(routeKey);
     }
   
     // 获取缓存的组件实例
     retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
       const routeKey = this.getRouteUniqueKey(route);
       return this.cachedRoutes.get(routeKey) || null;
     }
   
     // 判断是否复用当前路由
     shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
       return future.routeConfig === curr.routeConfig;
     }
   
     // 生成路由的唯一标识
     private getRouteUniqueKey(route: ActivatedRouteSnapshot): string {
       return route.pathFromRoot.map(r => r.url.join('/')).join('/');
     }
   }
   

2. 在根模块（AppModule）中提供这个自定义策略：

   import { NgModule } from '@angular/core';
   import { RouteReuseStrategy } from '@angular/router';
   import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';
   
   @NgModule({
     providers: [
       { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
     ]
   })
   export class AppModule { }
   

3. 在懒加载组件的路由配置中添加data: { reuse: true }标记：

   {
     path: 'persistent',
     loadChildren: () => import('./persistent/persistent.module').then(m => m.PersistentModule),
     data: { reuse: true }
   }
   

这样当你离开这个路由时，组件会被缓存起来；再次导航回来时，Angular会复用之前的实例，不会重新创建，也不会触发ngOnDestroy（除非你手动清除缓存）。

方案3：动态加载组件（脱离路由控制） #

如果你的懒加载组件不需要和路由绑定，只是需要在页面上持久展示，那么可以直接用Angular的动态组件加载能力，完全手动控制组件的生命周期。

步骤： #

• 在主模板中添加一个容器，用来承载动态加载的组件：

  <router-outlet></router-outlet>
  <!-- 动态组件容器 -->
  <div #persistentContainer></div>
  

• 在主组件中，使用ComponentFactoryResolver动态加载懒加载组件：

  import { Component, ViewChild, ViewContainerRef, OnInit, ComponentFactoryResolver } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements OnInit {
    @ViewChild('persistentContainer', { read: ViewContainerRef, static: true }) 
    persistentContainer!: ViewContainerRef;
  
    constructor(private cfr: ComponentFactoryResolver) {}
  
    ngOnInit(): void {
      // 页面初始化时加载懒加载组件
      this.loadPersistentComponent();
    }
  
    private loadPersistentComponent(): void {
      // 懒加载组件模块
      import('./persistent/persistent.component').then(module => {
        const componentFactory = this.cfr.resolveComponentFactory(module.PersistentComponent);
        // 创建组件实例
        this.persistentContainer.createComponent(componentFactory);
      });
    }
  }
  

这种方式下，组件的生命周期完全由你掌控，路由导航不会对它产生任何影响——只要容器元素存在，组件就会一直存活。

内容的提问来源于stack exchange，提问作者Eric K.