Question

我最近迁移到Angular 2 RC 5并将我的应用程序中的子模块转换为NgModule。

鉴于plunker中提供了以下Angular2 Routing Documentation，如何将CrisisCenterModule中的CrisisService转变为在危机中心模块路径中共享的有状态单身人士。

目前，为模块中的每个路径实例化一个新的CrisisService。

e.g。如果你在CrisisService中添加一个简单的构造函数，就像这样：

constructor() {
  console.log("Hello from CrisisService");
}

每次链接到不同的子路由时，浏览器控制台都会注销该字符串，例如/ crisis-center或/ crisis-center / 11

我希望能够通过一个服务在模块中的组件之间共享状态，该服务在您离开此模块时被清除，而不会将服务移动到全局共享模型中。

谢谢

Answer 1

编辑回答2016年12月5日11:14：

问题是一个错误，已在https://github.com/angular/angular/issues/11125修复。

因此，现在您可以在任何模块加载服务，而不仅仅是在应用程序中，并且您将为其子项创建一个单例。

旧答案 - 2016年8月22日20:20：

我找到了一个解决方案，在RootModule（AppModule）中提供服务，而不是在Submodule（CrisisCenterModule）中。

我现在知道它是否是一个错误或是否是正确的行为。

如果您找到有关此问题的任何文档，请告诉我，或者我将在Angular2 github repo中打开一个问题。

Answer 2

与m32da1一样，该服务仅用于CrisisCenterModule。我懒得加载我的路线：

from concurrent.futures import ThreadPoolExecutor
with ThreadPoolExecutor(max_workers=2) as executor:
    for item in getItems():
        executor.submit(processItem, item)

并将CrisisServices添加为危机中心模块中的提供者

如果您计划在其他组件/路线中使用它，您可以将其设为单身：https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module-for-root

添加shared.module.ts

export const routes: Routes = [ 
{ path: '', redirectTo: 'login', pathMatch: 'full' }, 
{ path: 'crisis', loadChildren: 'app/crisis-center/crisisCenter.module' } 
...

将SharedModule.forRoot添加到app.module.ts中的导入：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule }        from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HeroesModule } from './heroes/heroes.module';
import { LoginComponent } from './login.component';
import { DialogService }  from './dialog.service';
import { CrisisService }  from './crisis-center/crisis.service';
@NgModule({
    imports: [CommonModule, FormsModule, RouterModule ],
    declarations: [],
    exports: [
        CommonModule, FormsModule, RouterModule]
})
export class SharedModule {

    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [DialogService, CrisisService],
        };
    }
}

angular2 rc5路由器服务单件

2 个答案: