ionic2
Utiliser les services
Recherche…
Remarques
Une chose très importante à propos de l'utilisation des services partagés est qu'ils doivent être inclus dans le tableau de providers du composant le plus élevé où ils doivent être partagés.
Pourquoi donc? Eh bien, supposons que nous MyService référence MyService dans le tableau des providers de chaque Component . Quelque chose comme:
@Component({
templateUrl:"page1.html",
providers: [MyService]
})
Et
@Component({
templateUrl:"page2.html",
providers: [MyService]
})
De cette manière, une nouvelle instance du service sera créée pour chaque composant afin que l'instance où une page enregistre les données sera différente de l'instance utilisée pour obtenir les données. Donc ça ne marchera pas.
Pour que l'application entière utilise la même instance (ce qui fait que le service fonctionne comme un service singleton ), nous pouvons ajouter sa référence dans le App Component comme ceci:
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [MyService]
})
Vous pouvez également ajouter la référence MyService dans ionicBootstrap(MyApp, [MyService]); mais selon les guides de style Angular2
Fournissez des services à l'injecteur Angular 2 dans le composant le plus élevé où ils seront partagés.
Pourquoi? L'injecteur angulaire 2 est hiérarchique.
Pourquoi? Lors de la fourniture du service à un composant de niveau supérieur, cette instance est partagée et disponible pour tous les composants enfants de ce composant de niveau supérieur.
Pourquoi? C'est idéal lorsqu'un service partage des méthodes ou un état.
Pourquoi? Cela n'est pas idéal lorsque deux composants différents ont besoin d'instances différentes d'un service. Dans ce scénario, il serait préférable de fournir le service au niveau des composants nécessitant une nouvelle instance distincte.
Et
Ça va marcher. Ce n'est pas une bonne pratique. L'option du fournisseur de bootstrap est destinée à la configuration et au remplacement des services préenregistrés d'Angular , tels que sa prise en charge du routage.
... le App Component serait le meilleur choix.
Partager des informations entre différentes pages
L'un des exemples les plus simples d'utilisation des services partagés est le moment où nous souhaitons stocker des données à partir d'une page donnée de notre application, puis récupérer ces données à partir d'une autre page.
Une option pourrait consister à envoyer ces données en paramètre (par exemple, si une page appelle l’autre), mais si nous voulons utiliser ces données à partir d’une partie complètement différente de l’application, cela ne semble pas être le meilleur moyen de le faire. il. C'est à ce moment que les services partagés entrent en jeu.
Dans cet exemple, nous allons utiliser un service simple appelé MyService qui ne dispose que de deux méthodes simples: saveMessage() pour stocker une chaîne et getMessage() pour le récupérer à nouveau. Ce code fait partie de ce plunker de travail où vous pouvez le voir en action.
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;
}
}
Ensuite, lorsque nous voulons stocker un nouveau message, nous pouvons simplement utiliser le saveMessage(theMessageWeWantToSave); méthode de l'instance MyService (appelée juste 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);
}
}
De la même manière, lorsque nous voulons obtenir ces données, nous pouvons utiliser la méthode getMessage() de l’instance de service comme ceci:
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();
}
// ...
}
N'oubliez pas de vérifier la section Remarques pour savoir où la référence du service MyService être incluse et pourquoi.