如何使用ModuleWithProviders導入Angular模塊中的其他模塊

Question

我在模塊中有一個服務。 我稱之為AService和AModule：

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

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

我在b模塊內部有ab服務。 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 {}