Ho una serie di componenti angular2 che dovrebbero ricevere un servizio di iniezione. Il mio primo pensiero è stato che sarebbe stato meglio creare una super classe e iniettare lì il servizio. Qualunque dei miei componenti estenderebbe quindi quella superclasse, ma questo approccio non funziona.

Esempio semplificato:

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

Potrei risolverlo inserendo MyServicein ogni singolo componente e usando quell'argomento per la super()chiamata, ma è decisamente una sorta di assurdo.

Come organizzare correttamente i miei componenti in modo che ereditino un servizio dalla super classe?

Potrei risolvere questo problema iniettando MyService all'interno di ogni singolo componente e utilizzare quell'argomento per la chiamata super (), ma è decisamente una sorta di assurdo.

Non è assurdo. Ecco come funzionano i costruttori e l'iniezione nel costruttore.

Ogni classe iniettabile deve dichiarare le dipendenze come parametri del costruttore e se anche la superclasse ha dipendenze, queste devono essere elencate anche nel costruttore della sottoclasse e passate alla superclasse con la super(dep1, dep2)chiamata.

Il passaggio di un iniettore e l'acquisizione di dipendenze presenta imperativamente gravi svantaggi.

Nasconde le dipendenze che rendono il codice più difficile da leggere.
Viola le aspettative di chi ha familiarità con il funzionamento di Angular2 DI.
Interrompe la compilazione offline che genera codice statico per sostituire DI dichiarativo e imperativo per migliorare le prestazioni e ridurre le dimensioni del codice.

Soluzione aggiornata, impedisce la generazione di più istanze di myService utilizzando l'iniettore globale.

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

Ciò garantirà che MyService possa essere utilizzato all'interno di qualsiasi classe che estende AbstractComponent senza la necessità di iniettare MyService in ogni classe derivata.

Ci sono alcuni svantaggi di questa soluzione (vedi il commento di @ Günter Zöchbauer sotto la mia domanda originale):

• L'iniezione dell'iniettore globale è solo un miglioramento quando ci sono diversi servizi diversi che devono essere iniettati in molti luoghi. Se hai solo un servizio condiviso, probabilmente è meglio / più facile iniettare quel servizio all'interno delle classi derivate
• La mia soluzione e la sua alternativa proposta hanno lo svantaggio di rendere più difficile vedere quale classe dipende da quale servizio.

Per una spiegazione molto ben scritta dell'iniezione di dipendenza in Angular2, vedere questo post del blog che mi ha aiutato molto a risolvere il problema: http ://blog. Thoughtram.io/angular/2015/05/18/dependency-injection-in-angular- 2.html

Invece di iniettare manualmente tutti i servizi, ho creato una classe che fornisce i servizi, ad esempio, ottiene i servizi iniettati. Questa classe viene quindi iniettata nelle classi derivate e trasmessa alla classe base.

Classe derivata:

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

Classe base:

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

Classe di fornitura di servizi:

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

Invece di iniettare un servizio che ha tutti gli altri servizi come dipendenze, in questo modo:

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

Salterei questo passaggio aggiuntivo e aggiungo semplicemente iniettare tutti i servizi in BaseComponent, in questo modo:

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

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

Questa tecnica presuppone 2 cose:

1. La tua preoccupazione è interamente correlata all'ereditarietà dei componenti. Molto probabilmente, il motivo per cui sei arrivato a questa domanda è a causa dell'enorme quantità di codice non secco (WET?) Che devi ripetere in ogni classe derivata. Se desideri beneficiare di un unico punto di ingresso per tutti i tuoi componenti e servizi , dovrai eseguire il passaggio aggiuntivo.

2. Ogni componente estende il BaseComponent

C'è anche uno svantaggio se decidi di utilizzare il costruttore di una classe derivata, poiché dovrai chiamare super()e passare tutte le dipendenze. Anche se non vedo davvero un caso d'uso che richieda l'uso di constructorinvece di ngOnInit, è del tutto possibile che esista un tale caso d'uso.

Se la classe genitore è stata ottenuta da un plug-in di terze parti (e non è possibile modificare l'origine), puoi farlo:

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

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

o il modo migliore (rimani solo un parametro nel costruttore):

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

Da quello che ho capito per ereditare dalla classe base devi prima istanziarlo. Per istanziarlo è necessario passare i parametri richiesti dal suo costruttore, quindi li si passa da figlio a genitore tramite una chiamata super () in modo che abbia senso. L'iniettore ovviamente è un'altra soluzione praticabile.

BRUTTO HACK

Qualche tempo fa alcuni dei miei clienti vogliono unire due GRANDI progetti angolari a ieri (angular v4 in angular v8). Il progetto v4 utilizza la classe BaseView per ogni componente e contiene il tr(key)metodo per le traduzioni (in v8 uso ng-translate). Quindi, per evitare di cambiare sistema di traduzione e modificare centinaia di modelli (in v4) o impostare il sistema di traduzione 2 in parallelo, utilizzo il seguente brutto hack (non ne sono orgoglioso) - in AppModuleclasse aggiungo il seguente costruttore:

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

e ora AbstractComponentpuoi usare

export class AbstractComponent {
  private myservice: MyService = null;

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