ionic2
Använda tjänster
Sök…
Anmärkningar
En mycket viktig sak med att använda delade tjänster är att de måste ingå i providers för den mest komponent där de måste delas.
Varför är det så? Låt oss anta att vi inkluderar MyService referensen i providers från varje Component . Något liknande:
@Component({
templateUrl:"page1.html",
providers: [MyService]
})
Och
@Component({
templateUrl:"page2.html",
providers: [MyService]
})
På så sätt skapas en ny instans av tjänsten för varje komponent så att instansen där en sida sparar data kommer att skilja sig från den instans som används för att hämta data. Så det fungerar inte.
För att få hela appen att använda samma instans (få tjänsten att fungera som en singleton- tjänst) kan vi lägga till dess referens i App Component så här:
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [MyService]
})
Du kan också lägga till MyService referensen i ionicBootstrap(MyApp, [MyService]); men enligt Angular2-stilguider
Tillhandahålla tjänster till Angular 2-injektorn på den mest komponent där de kommer att delas.
Varför? Angular 2-injektorn är hierarkisk.
Varför? När du tillhandahåller tjänsten till en toppnivåkomponent delas den instansen och är tillgänglig för alla underordnade komponenter i den toppnivåkomponenten.
Varför? Detta är perfekt när en tjänst delar metoder eller tillstånd.
Varför? Detta är inte perfekt när två olika komponenter behöver olika instanser av en tjänst. I det här scenariot skulle det vara bättre att tillhandahålla tjänsten på den komponentnivå som behöver den nya och separata instansen.
Och
Det kommer att fungera. Det är bara inte en bästa praxis. Bootstrap-leverantörsalternativet är avsett för att konfigurera och åsidosätta Angular egna förregistrerade tjänster , som dess routingstöd.
... App Component skulle vara det bästa valet.
Dela information mellan olika sidor
Ett av de enklaste exemplen på att använda delade tjänster är när vi vill lagra en del data från en given sida i vår applikation och sedan hämta informationen igen men från en annan sida.
Ett alternativ kan vara att skicka informationen som en parameter (till exempel om en sida ringer den andra) men om vi vill använda dessa data från en helt annan del av applikationen verkar det inte vara det bästa sättet att göra den. Det är när delade tjänster spelar.
I det här exemplet kommer vi att använda en enkel tjänst som heter MyService som bara har två enkla metoder: saveMessage() att lagra en sträng och getMessage() att få den igen. Den här koden är en del av den här fungerande plunkeren där du kan se den i aktion.
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;
}
}
När vi vill lagra ett nytt meddelande kan vi bara använda saveMessage(theMessageWeWantToSave); från MyService instansen (kallas just 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);
}
}
På samma sätt, när vi vill skaffa den getMessage() kan vi använda getMessage() -metoden från tjänsteinstansen som denna:
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();
}
// ...
}
Kom ihåg att kolla avsnittet Kommentarer för att se var bör referensen för MyService tjänsten ska inkluderas och varför.