我有一个称为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.
}
}
向NgModule添加的任何服务都向根注入器注册（或对于延迟加载的路由模块，注入延迟注入器）。因此，服务范围是应用程序范围的，并保留其值。
如果要缩小范围，请改为向组件注册服务：
@NgComponent({
selector: 'app-designer',
providers: [
ProjectService
]
})
export class DesignerComponent {
}
这会将服务注册到组件注入器（它是分层的），并且其范围仅限于向其注册的组件的生存期。
当路由发生更改，并且Designer组件被另一个组件替换时，它将重新创建并重新初始化该组件（以及向其注册的所有提供程序）。
注意：由于服务的生命周期与组件的生命周期紧密相关，因此，如果需要，您还可以ngOnInit在ngOnDestroyDesignerComponent中执行服务的初始化例程，并在DesignerComponent中执行清理例程。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句