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í !