dependency injection - providedin - ¿Cómo extender un componente con inyección de dependencia en Angular 2?

inyeccion de dependencias angular 6

Question

Tengo la siguiente clase ModuleWithHttp :

@Injectable()
export default class {
  constructor(private fetchApi: FetchApi) {}
}

Y quiero usarlo de la siguiente manera:

@Component({
  selector: ''main'',
  providers: [FetchApi]
})
export default class extends ModuleWithHttp {
  onInit() {
    this.fetchApi.call();
  }
}

Entonces, extendiendo una súper clase que ya inyecta una dependencia, quiero tener acceso a ella en sus hijos.

Probé de muchas maneras diferentes, incluso teniendo la super-clase como componente:

@Component({
  providers: [FetchApi]
})
export default class {
  constructor(private fetchApi: FetchApi) {}
}

Pero aún así, this.fetchApi es null , incluso en súper clase.

Answer 1

Si desea evitar este código de "placa de la caldera", los servicios de inyección en clases secundarias solo se inyectan en el constructor de las clases primarias y luego se utilizan de forma efectiva los servicios en las clases secundarias a través de la herencia.

edit: de Angular 5.0.0 ReflectiveInjector ha sido desaprobado en favor de StaticInjector, a continuación se actualiza el código para reflejar este cambio

Tener un mapa de servicios con deps,

export const services: {[key: string]: {provide: any, deps: any[], useClass?: any}} = {
  ''FetchApi'': {
    provide: FetchApi,
    deps: []
  }
}

Tener un soporte de inyector,

import {Injector} from "@angular/core";

export class ServiceLocator {
  static injector: Injector;
}

configurarlo en AppModule,

@NgModule(...)
export class AppModule {
  constructor() {
    ServiceLocator.injector = Injector.create(
      Object.keys(services).map(key => ({
        provide: services[key].provide,
        useClass: services[key].provide,
        deps: services[key].deps
      }))
    );
  }
}

usar el inyector en la clase padre,

export class ParentClass {

  protected fetchApi: FetchApi;

  constructor() {
    this.fetchApi = ServiceLocator.injector.get(FetchApi);
    ....
  }
}

y extienda la clase principal para que no tenga que inyectar el servicio FetchApi .

export class ChildClass extends ParentClass {
  constructor() {
    super();
    ...
  }

  onInit() {
    this.fetchApi.call();
  }
}

Answer 2

Tal vez una respuesta tardía, pero resolví inyectar solo el inyector en el BaseComponent y en todas las subclases, de esa manera no necesito mantener un localizador de servicios.

Mi clase base:

constructor(private injectorObj: Injector) {

  this.store = <Store<AppState>>this.injectorObj.get(Store);
  this.apiService = this.injectorObj.get(JsonApiService);
  this.dialogService = this.injectorObj.get(DialogService);
  this.viewContainerRef = this.injectorObj.get(ViewContainerRef);
  this.router = this.injectorObj.get(Router);
  this.translate = this.injectorObj.get(TranslateService);
  this.globalConstantsService = this.injectorObj.get(GlobalConstantsService);
  this.dialog = this.injectorObj.get(MatDialog);
  this.activatedRoute = this.injectorObj.get(ActivatedRoute);
}

Mis clases de niños:

constructor( private injector: Injector) {

   super(injector);

}

Answer 3

Tienes que inyectar fetchAPI en la súper clase y pasarlo a la clase infantil

export default class extends ModuleWithHttp {

  constructor(fetchApi: FetchApi) {
     super(fetchApi);
  }   

  onInit() {
    this.fetchApi.call();
  }
}

Esta es una característica de cómo funciona la DI en general. La súper clase creará una instancia del niño a través de la herencia, pero debe proporcionar los parámetros necesarios para el niño.