如何通过路由级提供商正确管理 Angular 中的服务销毁？

Question

我正在开发一个 Angular 项目，其中我延迟加载模块并在路由级别提供多种服务。我的期望是，当用户导航离开路线时，这些服务将被破坏。但是，我观察到服务没有被销毁，并且它们的实例仍然保留在内存中。

这是我的模块和路由配置的简化版本：

{
   path: 'test-page',
   loadChildren: () => import('lazy-loaded-module-path').then((m) => m. LazyLoadedModule)
}

模块：

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '',
        component: MainPage,
        providers: [
          MyService,
        ]
      }
    ])
  ]
})
export class LazyLoadedModule {}

服务：

@Injectable()
export class MyService {
  constructor(
  ) {
    console.log('MY SERVICE IS CREATED')
  }

  ngOnDestroy(): void {
    console.log('MY SERVICE IS DESTROYED')
  }
}

Answer 1

Routes

内部没有providers数组（您提供的数组指定模块的路由！），您需要将其添加到模块的

providers

数组中！

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '',
        component: MainPage,
      }
    ])
  ],
  providers: [ // <-changed here
     MyService, // <-changed here
  ] // <-changed here
})
export class LazyLoadedModule {}