ionic2
Usando Servicios
Buscar..
Observaciones
Una cosa muy importante sobre el uso de servicios compartidos, es que deben incluirse en la matriz de providers del componente superior donde deben compartirse.
¿Porqué es eso? Bueno, supongamos que incluimos la referencia MyService en la matriz de providers de cada Component . Algo como:
@Component({
templateUrl:"page1.html",
providers: [MyService]
})
Y
@Component({
templateUrl:"page2.html",
providers: [MyService]
})
De esa forma , se creará una nueva instancia del servicio para cada componente, de modo que la instancia en la que una página guardará los datos será diferente de la instancia utilizada para obtener los datos. Así que eso no funcionará.
Para hacer que toda la aplicación use la misma instancia (hacer que el servicio funcione como un servicio único ), podemos agregar su referencia en el App Component la App Component siguiente manera:
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [MyService]
})
También puede agregar la referencia de MyService en ionicBootstrap(MyApp, [MyService]); Pero de acuerdo con las guías de estilo Angular2.
Proporcione servicios al inyector Angular 2 en el componente más alto donde se compartirán.
¿Por qué? El inyector Angular 2 es jerárquico.
¿Por qué? Al proporcionar el servicio a un componente de nivel superior, esa instancia se comparte y está disponible para todos los componentes secundarios de ese componente de nivel superior.
¿Por qué? Esto es ideal cuando un servicio es compartir métodos o estado.
¿Por qué? Esto no es ideal cuando dos componentes diferentes necesitan instancias diferentes de un servicio. En este escenario, sería mejor proporcionar el servicio al nivel de componente que necesita la instancia nueva e independiente.
Y
Funcionará. Simplemente no es una buena práctica. La opción del proveedor bootstrap está diseñada para configurar y anular los servicios prerregistrados propios de Angular , como su soporte de enrutamiento.
... el App Component la App Component sería la mejor opción.
Compartir información entre diferentes páginas.
Uno de los ejemplos más fáciles de usar servicios compartidos es cuando queremos almacenar algunos datos de una página determinada de nuestra aplicación, y luego obtener esos datos nuevamente, pero de otra página.
Una opción podría ser enviar esos datos como un parámetro (por ejemplo, si una página llama a la otra), pero si queremos usar esos datos desde una parte completamente diferente de la aplicación, esa no es la mejor manera de hacerlo. eso. Ahí es cuando los servicios compartidos entran en juego.
En este ejemplo, usaremos un servicio simple llamado MyService que solo tiene dos métodos simples: saveMessage() para almacenar una cadena y getMessage() para volver a obtenerla. Este código es parte de este desplumador de trabajo donde puede verlo en acción.
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;
}
}
Luego, cuando queremos almacenar un nuevo mensaje, solo podemos usar saveMessage(theMessageWeWantToSave); Método de la instancia de MyService (llamado simplemente 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 misma manera, cuando queremos obtener esos datos, podemos usar el método getMessage() de la instancia de servicio como esta:
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();
}
// ...
}
Recuerde revisar la sección de Comentarios para ver dónde se debe MyService la referencia del servicio MyService y por qué.