Angular路由切换时实现懒加载模块服务共享并销毁实例

你可以通过以下方案实现需求：

核心思路 #

把服务的提供绑定到懒加载模块的根路由组件上，利用Angular的注入器层级特性，让模块内所有子组件共享同一个服务实例，同时服务的生命周期会和根路由组件绑定——当路由离开模块时，根组件销毁，服务实例也会随之销毁并触发ngOnDestroy。

具体实现步骤 #

1. 调整服务的提供位置
   不要在懒加载模块的providers数组里注册服务，而是把服务添加到模块根路由组件的@Component装饰器的providers中：

   // module-a-root.component.ts
   import { Component } from '@angular/core';
   import { ModuleAService } from './module-a.service';
   
   @Component({
     selector: 'app-module-a-root',
     templateUrl: './module-a-root.component.html',
     providers: [ModuleAService] // 在这里提供服务
   })
   export class ModuleARootComponent {}
   

2. 配置懒加载模块的路由
   确保模块的所有子路由都挂在这个根路由组件下，这样子组件能通过注入器层级继承获取服务实例：

   // module-a-routing.module.ts
   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { ModuleARootComponent } from './module-a-root.component';
   import { ModuleAChildComponent } from './module-a-child.component';
   
   const routes: Routes = [
     {
       path: '',
       component: ModuleARootComponent,
       children: [
         { path: 'child', component: ModuleAChildComponent },
         // 其他子路由
       ]
     }
   ];
   
   @NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
   })
   export class ModuleARoutingModule {}
   

3. 在模块内组件注入服务
   模块内的任意子组件都可以直接注入该服务，获取的是同一个实例：

   // module-a-child.component.ts
   import { Component } from '@angular/core';
   import { ModuleAService } from './module-a.service';
   
   @Component({
     selector: 'app-module-a-child',
     templateUrl: './module-a-child.component.html'
   })
   export class ModuleAChildComponent {
     constructor(private moduleAService: ModuleAService) {}
   }
   

4. 验证服务销毁
   在服务中实现ngOnDestroy钩子，当路由切换出模块时，控制台会打印销毁日志：

   // module-a.service.ts
   import { Injectable, OnDestroy } from '@angular/core';
   
   @Injectable()
   export class ModuleAService implements OnDestroy {
     ngOnDestroy(): void {
       console.log('ModuleAService 已销毁');
     }
   }
   

为什么这个方案可行？ #

• Angular的注入器是层级结构的，子组件会向上查找父组件注入器中的服务实例，所以模块内所有子组件都能共享根路由组件提供的服务。
• 根路由组件的生命周期和路由绑定，当路由离开时组件会被销毁，其提供的服务实例也会被Angular回收，触发ngOnDestroy。

内容的提问来源于stack exchange，提问作者Daniel.V