Question

我正在尝试创建全局单件可用服务。我已经阅读了这个解决方案 - https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module，但它对我不起作用。

我创建了共享模块（这是我的简短示例）：

NgModule({
    imports: [
        CommonModule,
        ReactiveFormsModule
    ],
    declarations: [ ShopCartComponent ],
    exports: [
        CommonModule,
        ReactiveFormsModule,
        ShopCartComponent,
    ]
})
export class SharedModule {
    static forRoot() : ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [
                ProductsService,
                ProductsActions
            ]
        };
    }
}

在我的 root 应用程序模块中：

NgModule({
    imports: [
        BrowserModule,
        SharedModule.forRoot(),
        RouterModule.forRoot(routes)
    ],
    declarations: [ AppComponent ],
    providers: [
        provideStore({
           ... some stores ...
        })
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

但是当我尝试注入ProductsService时ProductsActions进入 children 模块，角度显示后跟错误信息：

原始例外：没有ProductsService的提供商！

这是我的孩子模块：

@NgModule({
    imports: [
        SharedModule,
        RouterModule.forChild([
            { path: '', component: ProductsComponent }
        ])
    ],
    declarations: [ ProductsComponent ]
})
export default class ProductsModule { }

我已经导入了SharedModule。我还要做点什么吗？

----------------更新-------------------

我已经解决了我的问题。我不得不将ProductsModule添加到root模块的导入中。像这样：

@NgModule({
    imports: [
        BrowserModule,
        ProductsModule,
        RouterModule.forRoot(routes),
        SharedModule.forRoot()
    ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

原因（我认为）是我想在根路由表中加载另一个模块，如下所示：

{ path: '', loadChildren: 'app/components/products/products.module' },

感谢各位帮忙！

Answer 1

我会将您的服务设置为共享模块的providers属性。

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [ ShopCartComponent ],
  exports: [
    CommonModule,
    ReactiveFormsModule,
    ShopCartComponent,
  ],
  providers: [ // <-----
    ProductsService,
    ProductsActions
  ]
})
export class SharedModule {
  (...)
}

Angular 2 RC.5单例全局共享服务

1 个答案: