AppModule 为每个路由重新初始化

Question

我有一个 Angular 9 应用程序，我注意到每次我从一条路线导航到另一条路线时，我的服务都会得到 reinitialized/reinstantiated。经过长时间的调试和试验，我决定登录 AppModule 的构造函数，并注意到它会为每条路由调用。注意：我使用 providedIn: 'root' 注入我的服务。我也尝试在 AppModule providers 属性中声明服务而不是使用 providedIn，但结果仍然相同。

有什么想法吗？

这是我的 AppModule：

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot({user : userReducer}),
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireStorageModule,
    ReactiveFormsModule,
    MatAutocompleteModule,
    NgbModule.forRoot(),
    FontAwesomeModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor(){
    console.log('MODULE INIT');
  }
}

这是我的路由模块：

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

根据您描述的行为，我认为您的应用在您每次导航时都会重新加载其自身的新状态。这可能发生在以下情况：

要求您的浏览器从头开始访问 URL（例如在另一个选项卡中或按 CTRL+R）。
要求您应用的原生 DOM 在新上下文中路由用户（例如使用原生 href 属性时）。

在任何情况下，您的代码似乎都是正确的，而且您似乎已经考虑到使用单例服务的后果，因此问题很可能不是来自提供问题的服务。

AppModule 为每个路由重新初始化

AppModule is reinitialized for each route

angular

typescript

angular2-routing