Tengo un conjunto de componentes de angular2 que deberían recibir algún servicio. Mi primer pensamiento fue que sería mejor crear una superclase e inyectar el servicio allí. Cualquiera de mis componentes ampliaría esa superclase, pero este enfoque no funciona.

Ejemplo simplificado:

export class AbstractComponent {
  constructor(private myservice: MyService) {
    // Inject the service I need for all components
  }
}

export MyComponent extends AbstractComponent {
  constructor(private anotherService: AnotherService) {
    super(); // This gives an error as super constructor needs an argument
  }
}

Podría resolver esto inyectando MyServicedentro de todos y cada uno de los componentes y usar ese argumento para la super()llamada, pero eso definitivamente es una especie de absurdo.

¿Cómo organizar correctamente mis componentes para que hereden un servicio de la superclase?

Podría resolver esto inyectando MyService dentro de todos y cada uno de los componentes y usar ese argumento para la llamada super (), pero eso definitivamente es una especie de absurdo.

No es absurdo. Así es como funcionan los constructores y la inyección de constructores.

Cada clase inyectable tiene que declarar las dependencias como parámetros de constructor y si la superclase también tiene dependencias, estas también deben listarse en el constructor de la subclase y pasarlas a la superclase con la super(dep1, dep2)llamada.

Pasar un inyector y adquirir dependencias tiene serias desventajas.

Oculta dependencias que dificultan la lectura del código.
Viola las expectativas de alguien familiarizado con el funcionamiento de Angular2 DI.
Rompe la compilación fuera de línea que genera código estático para reemplazar DI declarativo e imperativo para mejorar el rendimiento y reducir el tamaño del código.

Solución actualizada, evita que se generen múltiples instancias de myService utilizando el inyector global.

import {Injector} from '@angular/core';
import {MyServiceA} from './myServiceA';
import {MyServiceB} from './myServiceB';
import {MyServiceC} from './myServiceC';

export class AbstractComponent {
  protected myServiceA:MyServiceA;
  protected myServiceB:MyServiceB;
  protected myServiceC:MyServiceC;

  constructor(injector: Injector) {
    this.settingsServiceA = injector.get(MyServiceA);
    this.settingsServiceB = injector.get(MyServiceB);
    this.settingsServiceB = injector.get(MyServiceC);
  }
}

export MyComponent extends AbstractComponent {
  constructor(
    private anotherService: AnotherService,
    injector: Injector
  ) {
    super(injector);

    this.myServiceA.JustCallSomeMethod();
    this.myServiceB.JustCallAnotherMethod();
    this.myServiceC.JustOneMoreMethod();
  }
}

Esto garantizará que MyService se pueda usar dentro de cualquier clase que amplíe AbstractComponent sin la necesidad de inyectar MyService en cada clase derivada.

Esta solución tiene algunas desventajas (consulte el comentario de @ Günter Zöchbauer debajo de mi pregunta original):

• Inyectar el inyector global es solo una mejora cuando hay varios servicios diferentes que deben inyectarse en muchos lugares. Si solo tiene un servicio compartido, probablemente sea mejor / más fácil inyectar ese servicio dentro de las clases derivadas
• Mi solución y su alternativa propuesta tienen la desventaja de que dificultan ver qué clase depende de qué servicio.

Para obtener una explicación muy bien escrita de la inyección de dependencia en Angular2, consulte esta publicación de blog que me ayudó mucho a resolver el problema: http://blog.ilsttram.io/angular/2015/05/18/dependency-injection-in-angular- 2.html

En lugar de inyectar todos los servicios manualmente, creé una clase que proporciona los servicios, por ejemplo, se inyectan los servicios. Luego, esta clase se inyecta en las clases derivadas y se pasa a la clase base.

Clase derivada:

@Component({
    ...
    providers: [ProviderService]
})
export class DerivedComponent extends BaseComponent {
    constructor(protected providerService: ProviderService) {
        super(providerService);
    }
}

Clase base:

export class BaseComponent {
    constructor(protected providerService: ProviderService) {
        // do something with providerService
    }
}

Clase de prestación de servicios:

@Injectable()
export class ProviderService {
    constructor(private _apiService: ApiService, private _authService: AuthService) {
    }
}

En lugar de inyectar un servicio que tiene todos los demás servicios como dependencias, así:

class ProviderService {
    constructor(private service1: Service1, private service2: Service2) {}
}

class BaseComponent {
    constructor(protected providerService: ProviderService) {}

    ngOnInit() {
        // Access to all application services with providerService
        this.providerService.service1
    }
}

class DerivedComponent extends BaseComponent {
    ngOnInit() {
        // Access to all application services with providerService
        this.providerService.service1
    }
}

Me saltaría este paso adicional y simplemente agregaría inyectar todos los servicios en BaseComponent, así:

class BaseComponent {
    constructor(protected service1: Service1, protected service2: Service2) {}
}

class DerivedComponent extends BaseComponent {
    ngOnInit() {
        this.service1;
        this.service2;
    }
}

Esta técnica asume 2 cosas:

1. Su preocupación está completamente relacionada con la herencia de componentes. Lo más probable es que la razón por la que aterrizó en esta pregunta se deba a la abrumadora cantidad de código no seco (¿WET?) Que necesita repetir en cada clase derivada. Si desea beneficiarse de un único punto de entrada para todos sus componentes y servicios , deberá realizar un paso adicional.

2. Cada componente extiende el BaseComponent

También existe una desventaja si decide usar el constructor de una clase derivada, ya que deberá llamar super()y pasar todas las dependencias. Aunque realmente no veo un caso de uso que requiera el uso de en constructorlugar de ngOnInit, es muy posible que exista tal caso de uso.

Si la clase principal se obtuvo de un complemento de terceros (y no puede cambiar la fuente), puede hacer esto:

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

export MyComponent extends AbstractComponent {
  constructor(
    protected injector: Injector,
    private anotherService: AnotherService
  ) {
    super(injector.get(MyService));
  }
}

o la mejor manera (permanezca solo un parámetro en el constructor):

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

export MyComponent extends AbstractComponent {
  private anotherService: AnotherService;

  constructor(
    protected injector: Injector
  ) {
    super(injector.get(MyService));
    this.anotherService = injector.get(AnotherService);
  }
}

Por lo que entiendo, para heredar de la clase base, primero debe crear una instancia. Para crear una instancia, debe pasar los parámetros requeridos por el constructor, por lo que los pasa de hijo a padre a través de una llamada super () para que tenga sentido. El inyector, por supuesto, es otra solución viable.

Truco feo

Hace algún tiempo, algunos de mis clientes quieren unir dos GRANDES proyectos angulares a ayer (angular v4 en angular v8). Project v4 usa la clase BaseView para cada componente y contiene un tr(key)método para las traducciones (en v8 utilizo ng-translate). Entonces, para evitar cambiar el sistema de traducción y editar cientos de plantillas (en v4) o configurar 2 sistemas de traducción en paralelo, uso el siguiente truco feo (no estoy orgulloso de él): en la AppModuleclase agrego el siguiente constructor:

export class AppModule { 
    constructor(private injector: Injector) {
        window['UglyHackInjector'] = this.injector;
    }
}

y ahora AbstractComponentpuedes usar

export class AbstractComponent {
  private myservice: MyService = null;

  constructor() {
    this.myservice = window['UglyHackInjector'].get(MyService);
  }
}