首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Angular如何重新初始化单例服务

Angular如何重新初始化单例服务
EN

Stack Overflow用户
提问于 2020-12-11 08:28:26
回答 2查看 424关注 0票数 1

我有一个名为DesignerComponent的组件和子组件,它们共享一个名为ProjectService的服务,这个服务在一个名为DesignerModule的模块中声明为提供者,因为DesignerComponent和子组件必须共享ProjectService实例。

一切正常,但是当我转到另一个页面并返回到这个页面时,服务仍然保存所有旧数据,换句话说,这个服务实例永远不会被重新创建。在离开和返回到模块或页面时,如何强制Angular创建新的服务实例,但仍然能够在子组件之间共享一个实例?

代码语言:javascript
运行
复制
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.
   }
}
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-11 08:46:09

添加到NgModule的任何服务都注册到根注入器(或延迟加载的路由模块的惰性注入器)。因此,服务范围是应用程序范围的,并保留其值。

如果您想要缩小作用域,则改为使用组件注册服务:

代码语言:javascript
运行
复制
@NgComponent({
    selector: 'app-designer',
    providers: [
       ProjectService
    ]
})
export class DesignerComponent {
}

这将向组件注入器(它是分层的)注册服务,并且它的作用域被限制在它被注册到的组件的生命周期内。

当发生路由更改,并且设计器组件被替换为另一个组件时,它将重新创建并重新初始化该组件(以及向其注册的任何提供程序)。

注意:由于服务的生命周期与组件的生命周期密切相关,因此如果需要,您还可以在ngOnInit中执行服务的初始化例程,并在DesignerComponent的ngOnDestroy中执行清理例程。

票数 4
EN

Stack Overflow用户

发布于 2020-12-14 13:18:23

如果您希望验证ProjectService在运行时是否真的只运行一个实例,这个包可能会有所帮助:

https://www.npmjs.com/package/singleton-checker

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65244190

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档