Angular 2 : No provider for (injected) service

Question

我的应用程序中有两个服务 - MainService 和 RightClickService。应用程序中只有MainService是全局可访问的，RightClickService被注入(inject)到MainService中。因此，我将以下文件定义为:

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [MainService],
  bootstrap: [AppComponent]
})
export class AppModule { }

RightClickService 没有在 app.module.ts 中提及。

service.ts

 @Injectable()
 export class MainService {

  constructor(private rightClickService: RightClickService) {
    console.log("Constructor is init");
  }
}

RightClickService 仅存在于大应用程序 RightClickComponent 中的一个组件中。

右键单击.component.ts:

@Component({
  selector: 'right-click',
  template: `
    ...
  `,
  styleUrls: ['...'],
  providers: [RightClickService]
})
export class RightClickComponent implements OnInit {

  constructor(private rightClickService: RightClickService) {}

}

仍然，我得到错误:

EXCEPTION: No provider for RightClickService!

你知道我做错了什么吗？

Answer 1

除了已经说过的，你还必须知道两件事:

1. 您的应用只有一个根注入(inject)器，它包含您应用中任何模块的 @NgModule.providers 数组中指定的所有提供程序，包括 AppModule。

2. 每个组件都有自己的注入(inject)器(根注入(inject)器的子注入(inject)器)，其中包含组件的 @Component.providers 数组中声明的提供程序。

当 Angular 想要解析一个服务 (MainService) 的依赖关系 (RightClickService) 时，它会在包含所有 NgModule 提供者的根注入(inject)器中寻找它。

当 Angular 想要解决 组件 (RightClickComponent) 的依赖关系 (RightClickService) 时，它会在组件注入(inject)器中寻找它，如果找不到它会在 parent 中寻找它如果没有找到组件注入(inject)器，他将执行相同的操作，直到到达根注入(inject)器，如果没有找到，将抛出错误。

如果你想解决这个问题，你可以这样做:

function MainServiceFactory(RightClickService) {
    return new MainService(new RightClickService());
}

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
   {
     provide: MainService,
     useFactory: MainServiceFactory,
     deps: [RightClickService]
   }
],
  bootstrap: [AppComponent]
})
export class AppModule { }