我有一个名为DesignerComponent的组件和子组件,它们共享一个名为ProjectService的服务,这个服务在一个名为DesignerModule的模块中声明为提供者,因为DesignerComponent和子组件必须共享ProjectService实例。
一切正常,但是当我转到另一个页面并返回到这个页面时,服务仍然保存所有旧数据,换句话说,这个服务实例永远不会被重新创建。在离开和返回到模块或页面时,如何强制Angular创建新的服务实例,但仍然能够在子组件之间共享一个实例?
app.module.ts
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
RouterModule.forRoot([
{ path: '', loadChildren: () => import('./site/site.module').then(u => u.SiteModule) },
{ path: 'designer', loadChildren: () => import('./designer/designer.module').then(u => u.DesignerModule), canActivate: [AuthGuard] },
{ path: 'signin', loadChildren: () => import('./login/signin/signin.module').then(u => u.SigninModule) },
{ path: 'signup', loadChildren: () => import('./login/signup/signup.module').then(u => u.SignupModule) },
]),
BrowserAnimationsModule,
StoreModule.forRoot(reducers, {
metaReducers,
runtimeChecks: {
strictStateImmutability: true,
strictActionImmutability: true,
}
}),
],
providers: [
ScriptService,
ComponentLoadService,
MessagingService,
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
],
bootstrap: [AppComponent],
})
export class AppModule { }
designer.module.ts
@NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{ path: ':id', component: DesignerComponent }
]),
AngularSplitModule.forRoot(),
...
],
declarations: [
DesignerComponent,
DesignerMenuComponent,
...
]
providers: [
ProjectService,
...
]
})
export class DesignerModule { }
project.service.ts
@Injectable()
export class ProjectService{
private historyModule: ProjectUndoRedo[] = []; // This value still hold old data after going to another page and coming back. I want this service to be reinitialized
}
designer.component.ts
export class DesignerComponent{
constructor(public projectService: ProjectService) {
// When this constructor is called, projectSerivce instance is the old instance.
}
}
designer-menu.component.ts
export class DesignerMenuComponent{
constructor(public projectService: ProjectService) {
// When this constructor is called, projectSerivce instance is the old instance.
}
}
发布于 2020-12-11 08:46:09
添加到NgModule的任何服务都注册到根注入器(或延迟加载的路由模块的惰性注入器)。因此,服务范围是应用程序范围的,并保留其值。
如果您想要缩小作用域,则改为使用组件注册服务:
@NgComponent({
selector: 'app-designer',
providers: [
ProjectService
]
})
export class DesignerComponent {
}
这将向组件注入器(它是分层的)注册服务,并且它的作用域被限制在它被注册到的组件的生命周期内。
当发生路由更改,并且设计器组件被替换为另一个组件时,它将重新创建并重新初始化该组件(以及向其注册的任何提供程序)。
注意:由于服务的生命周期与组件的生命周期密切相关,因此如果需要,您还可以在ngOnInit
中执行服务的初始化例程,并在DesignerComponent的ngOnDestroy
中执行清理例程。
发布于 2020-12-14 13:18:23
如果您希望验证ProjectService在运行时是否真的只运行一个实例,这个包可能会有所帮助:
https://stackoverflow.com/questions/65244190
复制相似问题