Ich habe eine Reihe von angle2-Komponenten, die alle einen Service erhalten sollten. Mein erster Gedanke war, dass es am besten wäre, eine Superklasse zu schaffen und den Service dort zu injizieren. Jede meiner Komponenten würde dann diese Oberklasse erweitern, aber dieser Ansatz funktioniert nicht.

Vereinfachtes Beispiel:

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

Ich könnte dies lösen, indem ich MyServicein jede einzelne Komponente einspritze und dieses Argument für den super()Aufruf verwende, aber das ist definitiv eine Art Absurdität.

Wie organisiere ich meine Komponenten richtig, damit sie einen Service von der Superklasse erben?

Ich könnte dies lösen, indem ich MyService in jede einzelne Komponente einfüge und dieses Argument für den Aufruf von super () verwende, aber das ist definitiv absurd.

Es ist nicht absurd. So funktionieren Konstruktoren und Konstruktorinjektion.

Jede injizierbare Klasse muss die Abhängigkeiten als Konstruktorparameter deklarieren. Wenn die Oberklasse auch Abhängigkeiten aufweist, müssen diese ebenfalls im Konstruktor der Unterklasse aufgelistet und mit dem super(dep1, dep2)Aufruf an die Oberklasse weitergeleitet werden .

Das Umgeben eines Injektors und das Erwerben von Abhängigkeiten hat zwangsläufig schwerwiegende Nachteile.

Es verbirgt Abhängigkeiten, die das Lesen von Code erschweren.
Es verstößt gegen die Erwartungen eines Menschen, der mit der Funktionsweise von Angular2 DI vertraut ist.
Es unterbricht die Offline-Kompilierung, die statischen Code generiert, um deklarativen und imperativen DI zu ersetzen, um die Leistung zu verbessern und die Codegröße zu reduzieren.

Die aktualisierte Lösung verhindert, dass mithilfe des globalen Injektors mehrere Instanzen von myService generiert werden.

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

Dadurch wird sichergestellt, dass MyService in jeder Klasse verwendet werden kann, die AbstractComponent erweitert, ohne dass MyService in jede abgeleitete Klasse eingefügt werden muss.

Diese Lösung hat einige Nachteile (siehe Kommentar von @ Günter Zöchbauer unter meiner ursprünglichen Frage):

• Das Injizieren des globalen Injektors ist nur dann eine Verbesserung, wenn mehrere verschiedene Dienste an vielen Stellen injiziert werden müssen. Wenn Sie nur einen gemeinsamen Dienst haben, ist es wahrscheinlich besser / einfacher, diesen Dienst in die abgeleiteten Klassen einzufügen.
• Meine Lösung und seine vorgeschlagene Alternative haben beide den Nachteil, dass sie es schwieriger machen zu erkennen, welche Klasse von welchem ​​Dienst abhängt.

Für eine sehr gut geschriebene Erklärung von Dependency Injection in Angular2 diese Blog - Post sehen , die mir sehr geholfen , das Problem zu lösen: http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular- 2.html

Anstatt alle Dienste manuell zu injizieren, habe ich eine Klasse erstellt, die die Dienste bereitstellt, z. B. werden die Dienste injiziert. Diese Klasse wird dann in die abgeleiteten Klassen eingefügt und an die Basisklasse weitergegeben.

Abgeleitete Klasse:

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

Basisklasse:

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

Dienstleistungsklasse:

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

Anstatt einen Dienst einzufügen, der alle anderen Dienste als Abhängigkeiten hat, wie folgt:

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

Ich würde diesen zusätzlichen Schritt überspringen und einfach alle Dienste in die BaseComponent einfügen, wie folgt:

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

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

Diese Technik setzt zwei Dinge voraus:

1. Ihr Anliegen bezieht sich ausschließlich auf die Vererbung von Komponenten. Der Grund, warum Sie auf diese Frage gestoßen sind, ist höchstwahrscheinlich die überwältigende Menge an nicht trockenem (WET?) Code, die Sie in jeder abgeleiteten Klasse wiederholen müssen. Wenn Sie die Vorteile eines einzigen Einstiegspunkts für alle Ihre Komponenten und Services nutzen möchten, müssen Sie den zusätzlichen Schritt ausführen.

2. Jede Komponente erweitert die BaseComponent

Es gibt auch einen Nachteil, wenn Sie den Konstruktor einer abgeleiteten Klasse verwenden, da Sie super()alle Abhängigkeiten aufrufen und übergeben müssen. Obwohl ich keinen Anwendungsfall sehe, der die Verwendung von constructoranstelle von erfordert ngOnInit, ist es durchaus möglich, dass ein solcher Anwendungsfall existiert.

Wenn die übergeordnete Klasse vom Plug-In eines Drittanbieters stammt (und Sie die Quelle nicht ändern können), können Sie Folgendes tun:

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

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

oder am besten (nur ein Parameter im Konstruktor bleiben):

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

Soweit ich weiß, müssen Sie es zuerst instanziieren, um von der Basisklasse zu erben. Um es zu instanziieren, müssen Sie die vom Konstruktor erforderlichen Parameter übergeben, damit Sie sie über einen super () -Aufruf vom Kind zum Elternteil übergeben können, damit dies sinnvoll ist. Der Injektor ist natürlich eine weitere praktikable Lösung.

Hässlicher Hack

Vor einiger Zeit möchte ein Teil meines Kunden zwei große Winkelprojekte bis gestern verbinden (Winkel v4 in Winkel v8). Project v4 verwendet die BaseView-Klasse für jede Komponente und enthält eine tr(key)Methode für Übersetzungen (in v8 verwende ich ng-translate). Um zu vermeiden, dass das Übersetzungssystem gewechselt und Hunderte von Vorlagen (in Version 4) bearbeitet oder das Übersetzungssystem 2 parallel eingerichtet werden, verwende ich folgenden hässlichen Hack (ich bin nicht stolz darauf) - in der AppModuleKlasse füge ich folgenden Konstruktor hinzu:

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

und jetzt können AbstractComponentSie verwenden

export class AbstractComponent {
  private myservice: MyService = null;

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