更改路线时销毁Angular Service

时间:2019-10-03 14:12:03

标签: angular angular-router angular-providers

我有一个名为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导入的所有服务都被破坏。

我该怎么做?

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

使用

  providedIn: UserModule,

Read more

答案 2 :(得分:0)

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

删除

{ providedIn: 'root' }

并使用此

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

每次模块被销毁时,服务都会随之而来。