ionic2
Dienste verwenden
Suche…
Bemerkungen
Eine sehr wichtige Sache bei der Verwendung gemeinsam genutzter Dienste ist, dass sie im providers Array der obersten Komponente enthalten sein müssen, in der sie freigegeben werden müssen.
Warum das? Nehmen wir an, wir nehmen den MyService Verweis von jeder Component in das providers Array auf. So etwas wie:
@Component({
templateUrl:"page1.html",
providers: [MyService]
})
Und
@Component({
templateUrl:"page2.html",
providers: [MyService]
})
Auf diese Weise wird für jede Komponente eine neue Instanz des Diensts erstellt. Die Instanz, in der eine Seite die Daten speichert, unterscheidet sich von der Instanz, die zum Abrufen der Daten verwendet wird. Das geht also nicht.
Damit die gesamte App dieselbe Instanz verwendet (damit der Dienst als Singleton- Dienst funktioniert), können wir die Referenz in der App Component hinzufügen:
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [MyService]
})
Sie können den MyService Verweis auch in ionicBootstrap(MyApp, [MyService]); aber entsprechend Angular2 Style Guides
Bieten Sie dem Angular 2-Injektor an der obersten Komponente Dienste an, wo sie gemeinsam genutzt werden.
Warum? Der Angular 2 Injektor ist hierarchisch.
Warum? Bei der Bereitstellung des Dienstes für eine Komponente der obersten Ebene wird diese Instanz gemeinsam genutzt und steht allen untergeordneten Komponenten dieser Komponente der obersten Ebene zur Verfügung.
Warum? Dies ist ideal, wenn ein Dienst Methoden oder Status freigibt.
Warum? Dies ist nicht ideal, wenn zwei verschiedene Komponenten unterschiedliche Instanzen eines Dienstes benötigen. In diesem Szenario ist es besser, den Service auf der Komponentenebene bereitzustellen, die die neue und separate Instanz benötigt.
Und
Es wird klappen. Es ist einfach keine Best Practice. Die Bootstrap-Provider-Option dient zum Konfigurieren und Überschreiben der vorregistrierten Dienste von Angular , z. B. der Routing-Unterstützung.
... die App Component wäre die beste Wahl.
Teilen Sie Informationen zwischen verschiedenen Seiten
Eines der einfachsten Beispiele für die Verwendung gemeinsam genutzter Dienste ist, wenn wir einige Daten von einer bestimmten Seite unserer Anwendung speichern möchten und diese Daten dann aber wieder von einer anderen Seite erhalten möchten.
Eine Option könnte darin bestehen, diese Daten als Parameter zu senden (z. B. wenn eine Seite die andere Seite aufruft). Wenn wir diese Daten jedoch aus einem völlig anderen Teil der Anwendung verwenden möchten, scheint dies nicht die beste Methode zu sein es. Dann kommen Shared Services ins Spiel.
In diesem Beispiel verwenden wir einen einfachen Dienst namens MyService der nur zwei einfache Methoden hat: saveMessage() , um einen String zu speichern, und getMessage() , um ihn erneut getMessage() . Dieser Code ist Teil dieses funktionierenden Plunkers, wo Sie ihn in Aktion sehen können.
import {Injectable} from '@angular/core';
@Injectable()
export class MyService {
private message: string;
constructor(){ }
public saveMessage(theMessage: string): void {
this.message = theMessage;
}
public getMessage(): string {
return this.message;
}
}
Wenn wir dann eine neue Nachricht speichern möchten, können wir einfach die saveMessage(theMessageWeWantToSave); Methode aus der MyService Instanz (nur als service ).
import { Component } from "@angular/core";
import { MyService } from 'service.ts';
@Component({
templateUrl:"page1.html"
})
export class Page1 {
message: string;
// ...
public saveSecretMessage(): void {
this.service.saveMessage(this.message);
}
}
Auf dieselbe Weise können wir, wenn wir diese Daten getMessage() möchten, die Methode getMessage() von der getMessage() wie getMessage() :
import { Component } from "@angular/core";
import { MyService } from 'service.ts';
@Component({
templateUrl:"page2.html"
})
export class Page2 {
enteredMessage: string;
constructor(private service: MyService) {
this.enteredMessage = this.service.getMessage();
}
// ...
}
Bitte beachten Sie den Abschnitt Hinweise zu überprüfen , um zu sehen , wo sollte die Referenz für den MyService Dienst aufgenommen werden und warum.