当路由改变时销毁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导入的服务都被销毁。

我该怎么做？

- Kael

Answer 1

在您的惰性加载模块上创建一个根组件，具有路由出口，并在组件元数据中添加提供程序。

@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

- Tiago Viegas

---

当我这样做时，即使服务在组件提供程序中，我仍然会遇到错误：“没有为...提供程序”。 - Kael

你需要从服务中删除providedIn: 'root'属性。我已经在答案中添加了一个带有示例的stackblitz链接。 - Tiago Viegas

我的问题出在 entryComponent 中的 MatDialog，因此超出了范围。因此，我需要将服务传递到 Data 中以解决这个问题。 - Kael

Answer 2

使用

  providedIn: UserModule,

阅读更多

- dota2pro

Answer 3

只需将您的服务提供到模块中。

删除

{ providedIn: 'root' }

并使用这个

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MyPageModule
  ],
  providers: [MyServiceOne, MyServiceTwo]
})

每次模块被销毁时，服务也会随之停止。

- user4676340

---

已经完成了这个，服务始终处于活动状态。例如，我的服务在初始化时存储了由MyPageComponent设置的GUID。我转到“/example”，然后返回“/my-page”，旧的GUID始终存在。 - Kael

Angular模块何时被销毁，甚至是否被销毁的文档在哪里？ - tedw