Singletons, वर्ग के रूप में कोणीय 4

Question

मैं परिभाषित करने हूँ सेवा, कुछ इस तरह:

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

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

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

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

constructor(public _MyService: MyService) 

अपने मुख्य app.module.ts में मैं प्रदाता के रूप में उस वर्ग सेवा जोड़ लिया है।

providers: [someOtherThings, MyService, someOtherThings] 

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

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

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

Answer 1

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

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

प्रलेखन Here की जाँच करें!

Answer 2

मेरे मामले में, इसमें ReflectiveInjector के साथ कुछ करना है।

मेरे पास दो सेवाएं ए और बी हैं, प्रत्येक एक सिंगलटन सेवा एक दूसरे का जिक्र होना चाहिए।

यदि मैं उन्हें दूसरे के निर्माता में इंजेक्ट करता हूं, तो यह परिपत्र संदर्भ के कारण त्रुटि संकलित कर सकता है।

अगर मैं का उपयोग

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

बी के निर्माता में

, यह ए

का एक और उदाहरण बनाने और डेटा पकड़े एक CService बनाकर हल किया जाना चाहिए होगा, और AService और BService डेटा तक पहुँच सकते CService के माध्यम से।

Answer 3

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

अनुप्रयोग मॉड्यूल

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

Tes प्रकरण आयनिक पृष्ठ पर सेवा

प्रथम पृष्ठ

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 
    } 

} 

यह सिंगलटन बनाने के लिए घटक पर प्रदाताओं को हटाना न भूलें ।