如何使用 ModuleWithProviders 在 Angular 模块中导入其他模块

Question

我在一个模块中有一个服务。我称它们为 AService 和 AModule:

  @Injectable()
  export class AService {
    constructor() { }
  }

  @NgModule({
    imports: [CommonModule],
    providers: [AService]
  })
  export class AModule {}

我在 b 模块中有一个 b 服务。 B服务依赖A服务：

  @Injectable()
  export class BService {
    constructor(
      private aService: AService
    ) { }
  }

对于 B 模块，我使用 ModuleWithProviders:

  @NgModule({
    imports: [CommonModule, AModule]
  })
  export class BModule {
    public static forRoot(settings: any): ModuleWithProviders {
      return {
        ngModule: BModule,
        providers: [
          BService
        ]
      };
    }
  }

即使我正在导入 AModule，我也没有获得 AService 的提供程序。似乎对于 ModuleWithProviders，导入被忽略了：

  Promise rejection: StaticInjectorError(AppModule)[BService -> AService]:
  ...
  No provider for AService!

让 BModule 依赖于 AModule 的正确方法是什么？

Answer 1

我认为你的做法是相反的。您必须将 ModuleWithProviders 用于共享模块，在其中共享您的指令和服务，然后使用 forRoot 指令将该模块导入到您的应用程序模块中。

您可以使用下面的例子。

共享模块

import { NgModule, ModuleWithProviders } from '@angular/core';
@NgModule({
  declarations: [
    Pipes, Directives
  ],
  exports: [
    Pipes, Directives
  ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ SomeService ]
    };
  }
}

现在在您的应用程序模块中导入您的共享模块。 应用模块

import { SharedModule } from './shared/shared.module';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SharedModule.forRoot()
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

您也可以在不使用 forRoot() 的情况下在任何模块中导入该共享模块

其他模块

import { SharedModule } from '../shared/shared.module';

// ...

@NgModule({
  imports: [
    CommonModule,
    SharedModule
  ],
  declarations: [
    // ...
  ]
})
export class SomeFeatureModule {}

如何使用 ModuleWithProviders 在 Angular 模块中导入其他模块

How to import other modules in Angular Module with ModuleWithProviders

angular

angular5

angular6