Héritage et injection de dépendances

Question

J'ai un ensemble de composants angular2 qui devraient tous recevoir un service injecté. Ma première idée était qu'il serait préférable de créer une superclasse et d'y injecter le service. Tous mes composants devraient alors étendre 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 ce problème en injectant MyService à l'intérieur de chaque composant et utiliser cet argument pour les super() mais c'est définitivement une sorte d'absurdité.

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

Answer 1

Je pourrais résoudre ce problème en injectant MyService dans chaque composant et en utilisant cet argument pour l'appel à super() mais c'est définitivement absurde.

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

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

Passer autour d'un injecteur et acquérir des dépendances de manière impérative présente de sérieux inconvénients.

Il masque les dépendances, ce qui rend le code plus difficile à lire.
Il viole les attentes de ceux qui connaissent le fonctionnement d'Angular2 DI.
Il brise la compilation hors ligne qui génère du code statique pour remplacer les DI déclaratives et impératives afin d'améliorer les performances et de réduire la taille du code.

Answer 2

Solution mise à jour, empêche la génération de plusieurs instances de myService en utilisant 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 toute classe qui étend AbstractComponent sans qu'il soit nécessaire d'injecter MyService dans chaque classe dérivée.

Cette solution présente quelques inconvénients (voir le commentaire de @Günter Zöchbauer sous ma question initiale) :

• L'injection de l'injecteur global n'est une amélioration que lorsqu'il y a plusieurs services différents qui doivent être injectés à plusieurs endroits. Si vous n'avez qu'un seul service partagé, il est probablement mieux/plus facile d'injecter ce service dans la ou les classes dérivées.
• Ma solution et l'alternative qu'il propose ont toutes deux 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, voir cet article de blog qui m'a beaucoup aidé à résoudre le problème : http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html

Answer 3

Au lieu d'injecter tous les services manuellement, j'ai créé une classe fournissant les services, par exemple, elle obtient l'injection des services. 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 prestataires de services :

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

Answer 4

Au lieu d'injecter un service qui a tous les autres services comme dépendants, 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 l'injection de tous les services dans le 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 la quantité écrasante de code non sec (WET ?) que vous devez répéter dans chaque classe dérivée. Si vous voulez bénéficier d'un point d'entrée unique pour tous vos composants et services vous devrez faire l'étape supplémentaire.

2. Chaque composant étend le BaseComponent

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

Answer 5

Si la classe parent a été obtenue à partir d'un plug-in tiers (et que vous ne pouvez pas en 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 garder 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);
  }
}