Angular 2:没有(注入)服务的提供者

Question

我的应用程序中有两个服务 - MainService和RightClickService.只有MainService可以在应用程序中全局访问,RightClickService将注入MainService.因此,我将以下文件定义为:

app.module.ts

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

app.module.ts中未提及RightClickService.

service.ts

 @Injectable()
 export class MainService {

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

RightClickService仅存在于大应用程序RightClickComponent内部命名的一个组件中.

右click.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. 您的应用只有一个根注入器,其中包含@NgModule.providers应用程序中任何模块数组中包含的所有提供程序,包括AppModule.

2. 每个Component都有自己的注入器(根注入器的子注入器),它包含@Component.providers在组件数组中声明的提供者.

当angular想要解析服务(MainService)的依赖关系(RightClickService)时,他在包含所有NgModules的提供者的根注入器中查找它.

当angular要解析组件的依赖关系(RightClickComponent)时,他会在组件注入器中查找它,如果没有找到,他会在父组件注入器中查找它,如果没有找到,他将执行相同操作,直到他到达根注入器为止未发现错误将被抛出.

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

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 { }

Answer 2

我刚刚将其放入 Plunker 中，除非我输入错误......你所拥有的似乎有效。那么也许还有其他问题？

您可以在这里查看该插件：https://plnkr.co/edit/ea9dFs ?p=info

（该工具不允许我在没有代码的情况下发布......但你已经有了上面的代码......所以我只是粘贴其中的一部分。）

import { Injectable } from '@angular/core'

 @Injectable()
 export class RightClickService {

  constructor() {
    console.log("RightClickService is init");
  }
}