Wie kann ich Dienste in andere Dienste in Angular 2 einfügen?

Injizieren von Services in andere Services in Angular 2 (Beta)

Das Injizieren von Services in Komponenten ist mit dem @Component Decorator unkompliziert. Das Einfügen von Diensten außerhalb von Komponenten stellt jedoch eine Herausforderung dar.

Problemstellung

In Angular 2 möchten wir die manuelle Instanziierung von Diensten innerhalb anderer Dienste vermeiden, wie in der zu sehen ist Folgender Codeausschnitt:

export class MyFirstSvc {

}

export class MySecondSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

export class MyThirdSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

Lösung

Die Lösung beinhaltet die Verwendung des @Injectable-Dekorators für die Dienste, die wir injizieren möchten. Dieser Dekorator bereitet die Konstruktorparameter des Dienstes für die Abhängigkeitsinjektion vor.

Injektorhierarchie

Um zu verstehen, wie die Injektion funktioniert, ist es wichtig, das Konzept der Injektorhierarchie zu verstehen:

• Anwendungsinjektor:Konfiguriert mit dem zweiten Parameter der Bootstrap-Funktion.
• Komponenteninjektor:Konfiguriert mit dem Provider-Attribut des Komponente. Es kann auf Anbieter verweisen, die im übergeordneten Injektor definiert sind.

Beim Einfügen eines Dienstes in eine Komponente oder einen anderen Dienst sucht Angular2 in der folgenden Reihenfolge nach dem Anbieter:

1. Komponente Injector
2. AppComponent Injector
3. Application Injector

Provider Sharing

Die Injector-Hierarchie ermöglicht die kontrollierte gemeinsame Nutzung von Dienstinstanzen :

• Anbieter auf Anwendungsebene: Wird in der gesamten Anwendung geteilt.
• Anbieter auf Komponentenebene: Wird innerhalb der Komponente geteilt untergeordnete Komponenten und die an ihrer Abhängigkeitskette beteiligten Dienste.

Beispiel

@Injectable()
export class Service1 {
  constructor(service2:Service2) {
    this.service2 = service2;
  }

  getData() {
    return this.service2.getData();
  }
}

@Injectable()
export class Service2 {

  getData() {
    return [{ message: 'message1' }, { message: 'message2' }];
  }
}

In diesem Beispiel:

• Service1 hängt von Service2 ab.
• Beim Instanziieren von Service1 in der ChildComponent sucht Angular2 zuerst nach Service1 im ChildComponent-Injektor, dann im AppComponent-Injektor und schließlich im Anwendungsinjektor.
• Ebenso folgt Angular2 bei der Instanziierung von Service2 innerhalb von Service1 derselben Hierarchie.
• Die Injektorhierarchie und die Anbieterpositionierung ermöglichen eine flexible Abhängigkeitsfreigabe basierend auf den Anwendungsanforderungen.

Ressourcen

• [Angular2 Hierarchical Dependency Injection Guide](https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html)
• [ Plunkr-Beispiel](https://plnkr.co/edit/PsySVcX6OKtD3A9TuAEw?p=preview)

Das obige ist der detaillierte Inhalt vonWie kann ich Dienste in andere Dienste in Angular 2 einfügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!