Служба маршрутизации Angular2 RC5 синглтон

Question

Я недавно перешел на Angular 2 RC 5 и преобразовал подмодули в моем приложении в NgModule.

Принимая во внимание следующий элемент, предоставленный в документации по маршрутизации Angular2, как CrisisService в CrisisCenterModule может быть превращен в одноэлементный файл с состоянием, который совместно используется на маршрутах модуля кризисного центра.

В настоящее время создается новый CrisisService для каждого маршрута в модуле.

например, если вы добавляете простой конструктор в CrisisService, например, так:

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

Консоль браузера будет выходить из этой строки каждый раз, когда вы ссылаетесь на другой суб-маршрут, например, / кризис-центр или / кризис-центр /11

Я хотел бы иметь возможность обмениваться состоянием между компонентами в модуле через службу, которая очищается всякий раз, когда вы отправляетесь из этого модуля, без перемещения службы в глобальную общую модель.

Благодарю вас

Answer 1

Отредактированный ответ 2016 Dec 05 в 11:14:

Проблема была ошибкой и была исправлена ​​в https://github.com/angular/angular/issues/11125.

Таким образом, теперь вы можете загрузить сервис в любом модуле, а не только в приложении, и у вас будет одноэлементное приложение для его детей.

Старый ответ - 2016 авг 22 в 20:20:

Я нашел решение, предоставляющее услугу, в RootModule (AppModule), а не в Submodule (CrisisCenterModule).

Теперь я знаю, является ли это ошибкой или правильным поведением.

Если вы найдете какую-либо документацию по этому поводу, пожалуйста, дайте мне знать, или я открою проблему в репозитории Angular2 github.

Answer 2

Как говорит m32da1, служба используется только в CrisisCenterModule. Что я сделал, лениво загрузил свои маршруты:

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

и добавьте CrisisServices в качестве поставщика в модуль кризисного центра

Если вы планируете использовать его и в других компонентах / маршрутах, вы можете сделать его одноразовым: https://angular.io/docs/ts/latest/guide/ngmodule.html

Добавить общий.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],
        };
    }
}

И добавьте SharedModule.forRoot к импорту в app.module.ts:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

import { AppComponent }       from './app.component';
import { routing,
         appRoutingProviders } from './app.routing';

import { HeroesModule } from './heroes/heroes.module';

import { LoginComponent } from './login.component';

import { DialogService }  from './dialog.service';

@NgModule({
  imports: [
    BrowserModule,
    SharedModule.forRoot(),
    routing,
    HeroesModule
  ],
  declarations: [
    AppComponent,
    LoginComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}