Angular2 импортирует и объявляет глобальный сервис из подмодуля

Question

У меня интересный вопрос. У меня есть 2 модуля. app.module.ts (AppModule) и Listings.module.ts (ListingsModule). ListingsModule имеет сервис, давайте назовем его сервисом A. A должен быть одноэлементным глобальным сервисом, что означает, что все другие компоненты и сервисы должны иметь возможность взаимодействовать с одним и тем же A.

Для этого я сначала попытался объявить A провайдером в ListingsModule, но это не сработало так, как ожидалось, так как было объявлено только одно значение для использования для компонентов и сервисов в ListingsModule, но мне также нужно было использовать его в других модулях и в AppModule., Таким образом, я пришел к выводу, что мне нужно экспортировать этот сервис из ListingsModule и импортировать и предоставить его в AppModule, но это не сработало, как ожидалось.

A это ListingsStoreService.

//Stores
import { ListingsStoreService }             from './shared/listings-store.service';

//Modules
import { SharedModule }                                 from './../shared/shared.module';
import { HeaderModule }                                 from './../header/header.module';

@NgModule({
    imports: [
        SharedModule,
        HeaderModule,
        ListingsRoutingModule
    ],
    declarations: [
        ListingsComponent
    ],
    exports: [
        ListingsStoreService
    ],
    providers: [        ]
})
export class ListingsModule {
}

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

Какой правильный подход здесь? Как мне сделать эту работу?

Answer 1

Что делает angular с некоторыми из его модулей (например, RouterModule), так это позволяет условно создавать две версии одного и того же модуля через статические функции, называемые forRoot и forChild. "forRoot" может содержать глобальную службу, такую ​​как "ListingsStoreService", в своем массиве провайдеров, а "forChild" ее опускает. Затем вы можете вызвать "ListingsModule.forRoot()" в массиве импорта AppModule и вызывать "ListingsModule.forChild()" везде, где вам нужен "ListingsModule".

@NgModule({
imports: [
    SharedModule,
    HeaderModule,
    ListingsRoutingModule
],
declarations: [
    ListingsComponent
]
})
export class ListingsModule {
    static forRoot() : ModuleWithProviders {
        return {
            ngModule: ListingsModule,
            providers: [ ListingsStoreService ]
        };    
    };

    static forChild() : ModuleWithProviders {
        return {
             ngModule: ListingsModule,
             providers: []
        };
    };
};

Answer 2

Ваш ListingsStoreService должен быть импортирован в

imports: [
    SharedModule,
    HeaderModule,
    ListingsRoutingModule,
    ListingsStoreService
],

Я думаю, что это твоя проблема. Вы можете попробовать это? Я написал комментарий, но мне нужно 50 репутации для этого... так что вот ответ, где я не знаю 100%, если это работает.

Answer 3

Это должно работать без специальной конфигурации. Сервисы имеют глобальную область действия по умолчанию (до тех пор, пока модуль, в котором они объявлены, загружен с нетерпением). Ваша начальная конфигурация (которую вы описали в своем вопросе) должна работать.

Объявите вашу услугу в поставщиках ListingsModule:

@NgModule({
  providers: [ ListingsStoreService ]
})
export class ListingsModule {
}

Затем импортировать ListingsModule в AppModule:

@NgModule({
  imports: [ ListingsModule ]
})
export class AppModule {
}

NB. ListingsModule должен быть загружен с нетерпением, а не с отложенной загрузкой. Ваш вопрос не говорит, как ListingsModule загружен в вашем случае.