documento - Singletons en Ionic 3, Angular 4

ionic tutorial

Question

Estoy definiendo el servicio como clase, algo como esto:

@Injectable()
export class MyService {
...
}

En otros componentes o páginas, estoy importando esa clase con solo el comando de importación.

import { MyService } from ''../pages/services/myservice'';

En constructor:

constructor(public _MyService: MyService)

En mi app.module.ts principal, he agregado ese servicio de clase como proveedor.

providers: [someOtherThings, MyService, someOtherThings]

En Ionic 2, las cosas funcionan como se esperaba. El servicio es singleton.

Pero en Ionic 3, que usa 4 angulares, parece que cada componente está creando una nueva instancia de esa clase.

¿Hay alguna forma nueva de crear clases de servicios singleton en angular 4?

Answer 1

En mi caso, tiene algo que ver con ReflectiveInjector .

Tengo dos servicios A y B, cada uno debe ser un servicio singleton que se refiera entre sí.

Si los inyecté en el constructor del otro, puede causar un error de compilación debido a una referencia circular.

Si uso

const injector = ReflectiveInjector.resolveAndCreate([AService]);
const a = injector.get(AService);

en el constructor de B, hará otra instancia de A.

Y debe resolverse haciendo que un CService contenga los datos, y AService y BService puedan acceder a los datos a través de CService.

Answer 2

Estoy usando 3 iónico con lazyload un 4 angular y no tiene los problemas. Para hacerlo único, asegúrese de que su módulo de aplicación brinde el servicio. y eliminar proveedores en @Component que usan el servicio.

Módulo de aplicación

@NgModule({
...
providers: [
StatusBar,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
Singleton // the service or provider to be single ton
]
})
export class AppModule { }

El servicio

import { Injectable } from ''@angular/core'';
import ''rxjs/add/operator/map'';
@Injectable()
export class Singleton {
data = "init data";
constructor() {
console.log(''Hello Singleton Provider'');
}
set(data){
this.data = data;
}
log(){
console.log(this.data);
}
}

Tes Case el servicio en la página iónica

Primera página

import { Component } from ''@angular/core'';
import { IonicPage, NavController, NavParams } from ''ionic-angular'';
import { Singleton } from ''../../providers/singleton'';
@IonicPage()
@Component({
selector: ''page-first'',
templateUrl: ''first.html''
})
export class FirstPage {
constructor(public navCtrl: NavController, public navParams:
NavParams,private single:Singleton) {
}
ionViewDidLoad() {
console.log(''ionViewDidLoad First'');
this.single.log(); // log init data;
this.single.set("First singleton data");
}
}

Segunda pagina

import { Component } from ''@angular/core'';
import { IonicPage, NavController, NavParams } from ''ionic-angular'';
import { Singleton } from ''../../providers/singleton'';
@IonicPage()
@Component({
selector: ''page-second'',
templateUrl: ''second.html''
})
export class SecondPage {
constructor(public navCtrl: NavController, public navParams:
NavParams,private single:Singleton) {
}
ionViewDidLoad() {
console.log(''ionViewDidLoad Second'');
this.single.log(); // log First singleton data
}
}

Tercera página crea una nueva instancia si los proveedores agregaron el componente

import { Component } from ''@angular/core'';
import { IonicPage, NavController, NavParams } from ''ionic-angular'';
import { Singleton } from ''../../providers/singleton'';
@IonicPage()
@Component({
selector: ''page-second'',
templateUrl: ''second.html'',
providers:[Singleton] // wrong because its create a new instance
})
export class ThirdPage {
constructor(public navCtrl: NavController, public navParams:
NavParams,private single:Singleton) {
}
ionViewDidLoad() {
console.log(''ionViewDidLoad ThirdPage'');
this.single.log(); // log init data
}
}

asegúrese de eliminar los proveedores en el componente para que sea singleton.

Answer 3

Intente almacenar la instancia del servicio en su AppModule y obtenga la instancia (en lugar de crearla) más tarde en otros componentes.

import {Injector} from ''@angular/core'';
export class AppModule {
// Allows for retrieving singletons using ''AppModule.injector.get(MyService)'' later in the code
static injector: Injector;
constructor(injector: Injector) {
AppModule.injector = injector;
}
}

Y para recuperar el uso de la instancia del servicio:

const myService = AppModule.injector.get(MyService);

¡Consulta la documentación aquí !