angular - इओनिक 3 में सिंग्लटोन, कोनालर 4




ionic2 ionic3 (2)

मैं वर्ग के रूप में सेवा को परिभाषित कर रहा हूं, ऐसा कुछ:

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

अन्य घटकों या पृष्ठों में, मैं उस आदेश को आयात कमांड के साथ आयात कर रहा हूँ

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

निर्माता में:

constructor(public _MyService: MyService)

मेरे मुख्य ऐप में.मैodule.ts मैंने प्रदाता के रूप में उस क्लास सेवा को जोड़ा है I

providers: [someOtherThings, MyService, someOtherThings]

आयनिक 2 में, चीजें अपेक्षित रूप में काम कर रही हैं सेवा सिंगलटन है

लेकिन आयनिक 3 में, जो कोणीय 4 का उपयोग करता है, ऐसा लगता है कि हर घटक उस क्लास का नया उदाहरण बना रहा है।

क्या कोणीय 4 में सिंगलटन सेवा कक्षाएं बनाने का कोई नया तरीका है?


अपने AppModule में सेवा के उदाहरण को AppModule करने का प्रयास करें और अन्य घटकों में बाद में (इसे instancing के बजाय) प्राप्त करें।

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;
    }
}

और सेवा के उदाहरण का उपयोग करने के लिए पीछे हटना:

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

यहाँ दस्तावेज की जाँच करें!


इज़ॉनिक 3 का इस्तेमाल करके आलियालोड के साथ एक कोणीय 4 और समस्याएं नहीं हैं I यह सुनिश्चित करने के लिए कि आपके ऐप मॉड्यूल सेवा प्रदान करते हैं। और सेवा का उपयोग करने वाले @ कम्पेनेंट पर प्रदाताओं को हटा दें

ऐप मॉड्यूल

@NgModule({
  ...

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

सेवा

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);   
  }
}

टेस केस ईओनिक पृष्ठ पर सेवा

पहला पन्ना

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");
  }

}

द्वितीय पृष्ठ

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
  }

}

तीसरा पृष्ठ यह प्रोजेक्ट घटक पर जोड़े जाने पर नया उदाहरण बनाता है

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
  }

}

सुनिश्चित करने के लिए घटक पर प्रदाताओं को हटाने के लिए इसे सिंगलटन बनाने के लिए





ionic3