J'ai un ensemble de composants angular2 qui devraient tous recevoir un service injecté. Ma première pensée a été qu'il serait préférable de créer une super classe et d'y injecter le service. N'importe lequel de mes composants étendrait alors cette superclasse mais cette approche ne fonctionne pas.

Exemple simplifié:

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

Je pourrais résoudre cela en injectant MyServicedans chaque composant et utiliser cet argument pour l' super()appel, mais c'est définitivement une sorte d'absurde.

Comment organiser correctement mes composants pour qu'ils héritent d'un service de la super classe?

Je pourrais résoudre cela en injectant MyService dans chaque composant et utiliser cet argument pour l'appel super () mais c'est définitivement une sorte d'absurde.

Ce n'est pas absurde. C'est ainsi que fonctionnent les constructeurs et l'injection de constructeur.

Chaque classe injectable doit déclarer les dépendances en tant que paramètres de constructeur et si la superclasse a également des dépendances, celles-ci doivent également être répertoriées dans le constructeur de la sous-classe et transmises à la superclasse avec le super(dep1, dep2) appel.

Faire le tour d'un injecteur et acquérir des dépendances présente impérativement de sérieux inconvénients.

Il cache les dépendances, ce qui rend le code plus difficile à lire.
Cela viole les attentes d'une personne familière avec le fonctionnement d'Angular2 DI.
Il interrompt la compilation hors ligne qui génère du code statique pour remplacer les DI déclaratives et impératives pour améliorer les performances et réduire la taille du code.

Solution mise à jour, empêche la génération de plusieurs instances de myService à l'aide de l'injecteur 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();
  }
}

Cela garantira que MyService peut être utilisé dans n'importe quelle classe qui étend AbstractComponent sans avoir besoin d'injecter MyService dans chaque classe dérivée.

Il y a quelques inconvénients à cette solution (voir Ccomment de @ Günter Zöchbauer ci-dessous ma question initiale):

• L'injection de l'injecteur global n'est une amélioration que lorsque plusieurs services différents doivent être injectés dans de nombreux endroits. Si vous n'avez qu'un seul service partagé, il est probablement préférable / plus facile d'injecter ce service dans la ou les classes dérivées
• Ma solution et son alternative proposée ont à la fois l'inconvénient de rendre plus difficile de voir quelle classe dépend de quel service.

Pour une explication très bien écrite de l'injection de dépendances dans Angular2, consultez ce billet de blog qui m'a grandement aidé à résoudre le problème: http://blog.bientram.io/angular/2015/05/18/dependency-injection-in-angular- 2.html

Au lieu d'injecter manuellement tous les services, j'ai créé une classe fournissant les services, par exemple, elle obtient les services injectés. Cette classe est ensuite injectée dans les classes dérivées et transmise à la classe de base.

Classe dérivée:

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

Classe de base:

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

Classe de prestation de services:

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

Au lieu d'injecter un service qui a tous les autres services comme dépendances, comme ceci:

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

Je sauterais cette étape supplémentaire et ajouterais simplement injecter tous les services dans BaseComponent, comme ceci:

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

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

Cette technique suppose 2 choses:

1. Votre préoccupation est entièrement liée à l'héritage des composants. Très probablement, la raison pour laquelle vous avez atterri sur cette question est à cause de la quantité écrasante de code non sec (WET?) Que vous devez répéter dans chaque classe dérivée. Si vous souhaitez bénéficier d'un point d'entrée unique pour tous vos composants et services , vous devrez effectuer l'étape supplémentaire.

2. Chaque composant étend la BaseComponent

Il y a aussi un inconvénient si vous décidez d'utiliser le constructeur d'une classe dérivée, car vous devrez appeler super()et transmettre toutes les dépendances. Bien que je ne vois pas vraiment de cas d'utilisation qui nécessite l'utilisation de constructorau lieu de ngOnInit, il est tout à fait possible qu'un tel cas d'utilisation existe.

Si la classe parent a été obtenue à partir d'un plug-in tiers (et que vous ne pouvez pas changer la source), vous pouvez le faire:

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

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

ou la meilleure façon (ne restez qu'un seul paramètre dans le constructeur):

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);
  }
}

D'après ce que je comprends, pour hériter de la classe de base, vous devez d'abord l'instancier. Afin de l'instancier, vous devez passer ses paramètres requis par le constructeur, donc vous les passez de l'enfant au parent via un appel super () pour que cela ait du sens. L'injecteur est bien sûr une autre solution viable.

LAID HACK

Il y a quelque temps, certains de mes clients veulent joindre deux GRANDS projets angulaires à hier (angular v4 en angular v8). Le projet v4 utilise la classe BaseView pour chaque composant et contient une tr(key)méthode pour les traductions (dans la v8, j'utilise ng-translate). Donc, pour éviter de changer de système de traduction et d'éditer des centaines de modèles (en v4) ou de configurer le système de traduction 2 en parallèle, j'utilise le hack laid suivant (je n'en suis pas fier) ​​- dans la AppModuleclasse, j'ajoute le constructeur suivant:

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

et maintenant AbstractComponentvous pouvez utiliser

export class AbstractComponent {
  private myservice: MyService = null;

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