ionic2
Services gebruiken
Zoeken…
Opmerkingen
Een heel belangrijk ding over het gebruik van gedeelde services, is dat ze moeten worden opgenomen in de providers van de bovenste component waar ze moeten worden gedeeld.
Waarom is dat? Laten we aannemen dat we de MyService referentie opnemen in de providers van elke Component . Zoiets als:
@Component({
templateUrl:"page1.html",
providers: [MyService]
})
En
@Component({
templateUrl:"page2.html",
providers: [MyService]
})
Op die manier wordt voor elke component een nieuw exemplaar van de service gemaakt, zodat het exemplaar waar een pagina de gegevens opslaat, verschilt van het exemplaar dat wordt gebruikt om de gegevens op te halen. Dus dat zal niet werken.
Om ervoor te zorgen dat de hele app dezelfde instantie gebruikt (waardoor de service als een singleton- service werkt), kunnen we de verwijzing in de App Component als volgt toevoegen:
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [MyService]
})
U kunt ook de referentie MyService toevoegen in de ionicBootstrap(MyApp, [MyService]); maar volgens Angular2-stijlgidsen
Bied wel diensten aan de Angular 2-injector in de bovenste component waar ze zullen worden gedeeld.
Waarom? De hoekige injector is hiërarchisch.
Waarom? Wanneer de service wordt verleend aan een component op het hoogste niveau, wordt die instantie gedeeld en beschikbaar voor alle onderliggende componenten van die component op het hoogste niveau.
Waarom? Dit is ideaal wanneer een service methoden of status deelt.
Waarom? Dit is niet ideaal wanneer twee verschillende componenten verschillende instanties van een service nodig hebben. In dit scenario zou het beter zijn om de service te verlenen op componentniveau waarvoor de nieuwe en afzonderlijke instantie nodig is.
En
Het zal werken. Het is gewoon geen best practice. De bootstrap-provideroptie is bedoeld voor het configureren en overschrijven van de eigen vooraf geregistreerde services van Angular , zoals routeringsondersteuning.
... zou de App Component de beste keuze zijn.
Deel informatie tussen verschillende pagina's
Een van de gemakkelijkste voorbeelden van het gebruik van gedeelde services is wanneer we sommige gegevens van een bepaalde pagina van onze applicatie willen opslaan en die gegevens vervolgens opnieuw ophalen, maar dan vanaf een andere pagina.
Een optie zou kunnen zijn om die gegevens als een parameter te verzenden (bijvoorbeeld als de ene pagina de andere pagina aanroept), maar als we die gegevens uit een heel ander deel van de applicatie willen gebruiken, lijkt dat niet de beste manier om te doen het. Dat is wanneer gedeelde diensten komen te spelen.
In dit voorbeeld gaan we een eenvoudige service gebruiken met de naam MyService die slechts twee eenvoudige methoden heeft: saveMessage() om een string op te slaan en getMessage() om deze opnieuw te krijgen. Deze code maakt deel uit van deze werkende plunker waar u deze in actie kunt zien.
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;
}
}
Als we vervolgens een nieuw bericht willen opslaan, kunnen we gewoon het saveMessage(theMessageWeWantToSave); methode van de MyService instantie (alleen 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);
}
}
Op dezelfde manier kunnen we, als we die gegevens willen krijgen, de methode getMessage() van de service-instantie als volgt gebruiken:
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();
}
// ...
}
Vergeet niet om de sectie Opmerkingen te bekijken om te zien waar de referentie voor de MyService service moet worden opgenomen en waarom.