Angular2 从子模块导入并声明全局服务

Question

我有一个有趣的问题。我有 2 个模块。 app.module.ts (AppModule) 和 listings.module.ts (ListingsModule)。 ListingsModule 有一个服务，我们称它为服务 A。A 需要是一个单例全局服务，这意味着所有其他组件和服务都需要能够与同一个 A 进行交互。

为此，我首先尝试在 ListingsModule 中将 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

您的 ListingsStoreService 必须导入

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

我认为这是你的问题。你能试试这个吗？我已经写了一条评论，但我需要 50 个声望...所以这里是一个我不知道 100% 是否有效的答案。

Answer 2

无需特殊配置即可使用。默认情况下，服务具有全局范围（只要声明它们的模块是预先加载的）。您的初始配置（您在问题中描述的）应该有效。

在 ListingsModule 的提供商中声明您的服务：

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

然后在AppModule中导入ListingsModule:

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

注意。 ListingsModule 必须预先加载，而不是 lazy-loaded。您的问题没有说明 ListingsModule 是如何加载到您的案例中的。

Answer 3

angular 对其某些模块（例如 RouterModule）所做的是允许通过名为 "forRoot" 和 "forChild" 的静态函数创建同一模块的两个版本，按照惯例。 "forRoot" 可以包含全局服务，例如在其提供者数组中的 "ListingsStoreService"，而 "forChild" 将忽略它。然后你可以在 AppModule 导入数组中调用 "ListingsModule.forRoot()"，并在你需要 "ListingsModule".

的任何其他地方调用 "ListingsModule.forChild()"

@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: []
        };
    };
};

Angular2 从子模块导入并声明全局服务

Angular2 import and declare global service from submodule

angular

angular2-services

angular2-modules