角度2:没有(注入)服务的提供者 [英] Angular 2: No provider for (injected) service

问题描述

我的应用程序中有两项服务-MainService和RightClickService.在应用程序中只能全局访问MainService，并且RightClickService已注入MainService.因此，我将以下文件定义为:

I have two services in my app - MainService and RightClickService. Only MainService is accessible globally in the application, and RightClickService is injected to MainService. Therefore, I defined the following files as:

app.module.ts

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

app.module.ts中未提及RightClickService.

RightClickService is not mentioned in app.module.ts.

service.ts

 @Injectable()
 export class MainService {

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

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

RightClickService exists only in one component named inside the big application RightClickComponent.

right-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!

您知道我在做什么吗?

Do you know what I'm doing wrong?

推荐答案

除了已经说过的内容，您还必须了解两件事:

In addition to what already said, you must know two things:

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

1. Your app has only one root injector that contains all providers delcared in @NgModule.providers array of any module in your app including AppModule.

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

Each Component has its own injector (child injector of the root injector) that contains providers declared in @Component.providers array of the component.

angular想要解析服务(MainService)的依赖项(RightClickService)时，它将在包含所有NgModule的提供程序的根注入器中进行查找.

when angular want to resolve dependencies (RightClickService) of a service (MainService) it looks for it in the root injector which contains providers of all NgModules.

angular要解析组件(RightClickComponent)的依赖项(RightClickService)时，会在组件注入器中查找它，如果找不到，则会在父级中寻找它.如果找不到组件注入器，他将执行相同的操作，直到到达根注入器为止；如果找不到，将抛出错误.

When angular want to resolve dependencies (RightClickService) of a component (RightClickComponent) it looks for it in the component injector if not found it looks for it in the parent component injector if not found he will do the same until he reaches the root injector if not found an error will be thrown.

如果您想解决问题，可以执行以下操作:

if you want to solve the problem you can do this :

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

这篇关于角度2:没有(注入)服务的提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！