Tengo dos servicios en mi aplicación: MainService y RightClickService. Solo se puede acceder a MainService globalmente en la aplicación, y RightClickService se inyecta en MainService. Por lo tanto, definí los siguientes archivos como:
aplicación.módulo.ts
@NgModule({ declarations: [ AppComponent, ... ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [MainService], bootstrap: [AppComponent] }) export class AppModule { }RightClickService no se menciona en app.module.ts.
servicio.ts
@Injectable() export class MainService { constructor(private rightClickService: RightClickService) { console.log("Constructor is init"); } }RightClickService existe solo en un componente nombrado dentro de la gran aplicación RightClickComponent.
clic derecho.component.ts:
@Component({ selector: 'right-click', template: ` ... `, styleUrls: ['...'], providers: [RightClickService] }) export class RightClickComponent implements OnInit { constructor(private rightClickService: RightClickService) {} }Aún así, me sale el error:
EXCEPTION: No provider for RightClickService!¿Sabes lo que estoy haciendo mal?
Además de lo ya dicho, debes saber dos cosas:
Su aplicación tiene solo un inyector raíz que contiene todos los proveedores definidos en la matriz @NgModule.providers de cualquier módulo en su aplicación, incluido AppModule .
Cada componente tiene su propio inyector (inyector secundario del inyector raíz) que contiene proveedores declarados en la matriz @Component.providers del componente.
cuando angular quiere resolver dependencias (RightClickService) de un servicio (MainService) lo busca en el inyector raíz que contiene proveedores de todos los NgModules.
Cuando angular quiere resolver las dependencias (RightClickService) de un componente (RightClickComponent) lo busca en el inyector del componente si no lo encuentra, lo busca en el inyector del componente principal si no lo encuentra, hará lo mismo hasta que llegue al inyector raíz si no encontrado arrojará un error.
si quieres resolver el problema puedes hacer esto:
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 { }Acabo de introducir esto en un Plunker y, a menos que haya escrito algo mal... lo que tienes parece funcionar. Entonces, ¿tal vez hay algo más mal?
¿Puedes ver el plunker aquí: https://plnkr.co/edit/ea9dFs?p=info
(La herramienta no me permite publicar sin el código... pero ya tienes el código de arriba... así que solo estoy pegando una parte).
import { Injectable } from '@angular/core' @Injectable() export class RightClickService { constructor() { console.log("RightClickService is init"); } }