ionic2
Utilizzo dei servizi
Ricerca…
Osservazioni
Una cosa molto importante sull'utilizzo dei servizi condivisi è che devono essere inclusi nella matrice dei providers del componente più in alto in cui devono essere condivisi.
Perché? Bene, supponiamo di includere il riferimento a MyService nell'array providers da ciascun Component . Qualcosa di simile a:
@Component({
templateUrl:"page1.html",
providers: [MyService]
})
E
@Component({
templateUrl:"page2.html",
providers: [MyService]
})
In questo modo verrà creata una nuova istanza del servizio per ciascun componente, pertanto l'istanza in cui una pagina salverà i dati sarà diversa dall'istanza utilizzata per ottenere i dati. Quindi non funzionerà.
Per fare in modo che l'intera app utilizzi la stessa istanza (facendo in modo che il servizio funzioni come servizio singleton ), possiamo aggiungere il suo riferimento nella App Component questo modo:
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [MyService]
})
È anche possibile aggiungere il riferimento MyService in ionicBootstrap(MyApp, [MyService]); ma secondo le guide di stile Angular2
Fornisci servizi all'iniettore Angular 2 nella parte più alta in cui saranno condivisi.
Perché? L'iniettore Angular 2 è gerarchico.
Perché? Quando si fornisce il servizio a un componente di livello superiore, tale istanza è condivisa e disponibile per tutti i componenti figlio di quel componente di livello superiore.
Perché? Questo è l'ideale quando un servizio sta condividendo metodi o stato.
Perché? Questo non è l'ideale quando due diversi componenti richiedono istanze diverse di un servizio. In questo scenario sarebbe meglio fornire il servizio a livello di componente che necessita della nuova istanza separata.
E
Funzionerà. Non è solo una buona pratica. L'opzione del provider di bootstrap è intesa per la configurazione e l'override dei servizi preregistrati di Angular , come il supporto del routing.
... la App Component sarebbe la scelta migliore.
Condividi le informazioni tra pagine diverse
Uno degli esempi più semplici di utilizzo dei servizi condivisi è quando vogliamo archiviare alcuni dati da una determinata pagina della nostra applicazione, e quindi ottenere di nuovo quei dati ma da un'altra pagina.
Un'opzione potrebbe essere quella di inviare quei dati come parametro (ad esempio, se una pagina chiama l'altro) ma se vogliamo usare quei dati da una parte completamente diversa dell'applicazione, questo sembra non essere il modo migliore di fare esso. Questo è quando i servizi condivisi vengono a giocare.
In questo esempio, useremo un servizio semplice chiamato MyService che ha solo due semplici metodi: saveMessage() per memorizzare una stringa e getMessage() per ottenerlo di nuovo. Questo codice fa parte di questo plunker funzionante in cui è possibile vederlo in azione.
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;
}
}
Quindi, quando vogliamo memorizzare un nuovo messaggio, possiamo semplicemente usare saveMessage(theMessageWeWantToSave); metodo MyService (chiamato solo 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);
}
}
Allo stesso modo, quando vogliamo ottenere quei dati possiamo usare il metodo getMessage() del servizio in questo modo:
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();
}
// ...
}
Ricordarsi di controllare la sezione Osservazioni per vedere dove dovrebbe essere incluso il riferimento per il servizio MyService e perché.