angular - 路由更改时销毁 Angular 服务

Question

我有一个名为 MyPageModule 的复杂模块导入几个为 Service 提供以下注解的模块 @Injectable( { providedIn: 'root' } ) .

这个模块是通过延迟加载导入的，如下所示:

// AppRoutingModule
...
 {
    path: 'my-page',
    loadChildren: './lazy-loader-modules/lazy-loader-mypage/lazy-loader-mypage.module#LazyLoaderMyPageModule'
 }

...

// LazyLoaderMyPageModule
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MyPageModule
  ]
})
export class LazyLoaderMyPageModule { }

我想要的行为(实际上并非如此):
当 url 与/my-page/* 不同时，我希望 MyPageModule 导入的所有服务都被销毁。

我怎样才能做到这一点 ？

Answer 1

使用路由器 socket 在延迟加载的模块上创建根组件，并在组件元数据上添加提供程序

@Component({
  selector: 'app-my-page-root',
  template: '<router-outlet></router-outlet>',
  styleUrls: ['./my-page-root.component.scss'],
  providers:[MyPageService, MyPageOtherService]
}) 
class MyPageRootComponent {}

将您的延迟加载模块路由更改为:

const routes= [
 { 
    path: '',
    component: MyPageRootComponent
    children: [
      // all of your routes
    ]
 }
]

当 MyPageRootComponent 被销毁时，您的所有服务都将被销毁。

编辑:

StackBlitz: https://stackblitz.com/edit/lazy-load-destory-services