2016-01-15 33 views
5

में पूरे ऐप में एक्सेस कुंजी डेटा एंगुलर 2 और आयनिक 2 - टाइपस्क्रिप्ट में एक संपूर्ण ऐप में डेटा एक्सेस करने का सबसे अच्छा तरीका क्या होगा।कोणीय 2 और आयनिक 2

उपयोगकर्ता की जानकारी के लिए मेरा प्रारंभिक विचार केवल प्रत्येक फ़ाइल में उपयोगकर्ता वर्ग को आयात करना था, लेकिन चूंकि मुझे केवल एक उपयोगकर्ता आईडी की आवश्यकता है, मैंने सोचा कि यह किसी प्रकार की कॉन्फ़िगरेशन फ़ाइल के लिए बेहतर होगा, शायद ऐप क्लास - और मैं पर्यावरण की जानकारी भी संग्रहीत कर सकता हूं और यूआरएल ect।

मुझे वास्तव में पता नहीं है कि इसके आसपास सबसे अच्छा अभ्यास क्या है और इस विषय पर अधिक नहीं मिल सका।

+1

शायद सबसे अच्छा तरीका है एक इंजेक्शन सेवा है कि आवेदन के इंजेक्टर में कॉन्फ़िगर किया गया है करने के लिए किया जाएगा। – toskv

उत्तर

8

ऐसा करने का एक तरीका यह है कि जब आप एप्लिकेशन को बूटस्ट्रैप करते हैं तो आपको सिंगलटन के रूप में आवश्यक सभी गुणों के साथ कक्षा बनाना होगा।

सेवा:

import {Injectable} from 'angular2/angular2'; 


@Injectable() 
export class Config { 

    constructor() {} 

    public get USERID(): string { 
     return "XCAMPLISHIOUS"; 
    } 

} 

Bootstraping:

import {bootstrap} from 'angular2/angular2'; 
import {TaciIlieApp} from './app/taci-ilie'; 
import {Config} from './app/services/config/config'; 

bootstrap(TaciIlieApp, [Config]); // configuring the Config provider here will ensure a single instance is created 

उपयोग:

import {Component, Inject} from 'angular2/angular2'; 

import {Config} from '../../services/config/config'; 

@Component({ 
    selector: 'game', 
    templateUrl: 'app/components/game/game.html', 
    styleUrls: ['app/components/game/game.css'], 
    providers: [], 
    directives: [], 
}) 
export class Game { 


    constructor(private config: Config) { 
     console.log(this.config.USERID); 
    } 
+0

यह सिंगलटन सेवा नहीं बनाता है। बूटस्ट्रैप किए गए कॉन्फ़िगर का उदाहरण 'गेम' घटक में से एक से अलग होगा। आपको 'गेम' घटक में 'प्रदाताओं' में सेवा को दोबारा घोषित नहीं करना चाहिए। बस इसे सीधे निर्माता में इंजेक्ट करें। – Dustin

+0

@ डस्टिन अच्छा स्थान धन्यवाद! मैं जवाब अपडेट करूंगा। :) – toskv

+0

@toskv अभी भी उपयोग में सेवा को फिर से घोषित करने वाला उदाहरण नहीं है? – Adam

4

the official Ionic 2 forum में मैंने पाया कि आप

@App खुद को इसकी सुई चाहिए, फिर @Page में आयात इसका इस्तेमाल करने की।

इसका कारण यह है आयोनिक अपने अनुप्रयोग bootstrapping के लिए कोणीय 2 के रूप में एक ही प्रक्रिया का उपयोग नहीं करता है, और @App डेकोरेटर सिंगलटन सेवाओं है कि सभी पृष्ठों के लिए स्वचालित रूप से उपलब्ध हैं बनाने की क्षमता प्रदान नहीं करता है और आपके आवेदन में घटक; इसलिए तार्किक उपयोग आपकी ऐप.नेट और उस पृष्ठ में आपकी सेवा को इंजेक्ट करना है जिसमें आप इसका उपयोग करने जा रहे हैं ... अच्छा, इस तरह का व्यवहार होना चाहिए ... मेरे मामले में (मैं आयनिक 2 के साथ काम कर रहा हूं बीटा 5) यह काम नहीं करता है, अगर आप ऐसा करते हैं और @App और @Page अपनी सेवा के साथ इंजेक्ट करते हैं (दोनों उन्हें आयात करते हैं और प्रदाता सरणी का उपयोग करते हैं, तो यह दो अलग-अलग सेवाएं बनाएगा, जो मेरे मामले में है इतना अच्छा नहीं है क्योंकि मैं App.ts में अपनी सेवा के लिए मूल्य निर्धारित कर रहा हूं और अपने कुछ पृष्ठों में उन मानों को पुनर्प्राप्त कर रहा हूं। इसलिए, यदि आपको सिंगलटन व्यवहार की आवश्यकता है, तो मेरे लिए जाने का तरीका ओल का उपयोग करके सिंगलटन सेवा बनाना था 'इस तरह चार पैटर्न का गिरोह ..

आपकी सेवा में ...

export class Globals { 

//---------------------------------------------------------------------------------------------- 
// Static (Singleton Implementation) Properties Section: 
//---------------------------------------------------------------------------------------------- 
static instance   : Globals; 
static isCreating  : Boolean = false; 

//---------------------------------------------------------------------------------------------- 
// Private Properties Section: 
//---------------------------------------------------------------------------------------------- 
private screenWidth  : number; 
private screenHeight : number; 

//---------------------------------------------------------------------------------------------- 
// Constructor Method Section: 
//---------------------------------------------------------------------------------------------- 
constructor() 
{ 
    if (!Globals.isCreating) 
    { 
     throw new Error("No se puede llamar a esta clase con 'new' - Utiliza getInstance()"); 
    } 
} 


//---------------------------------------------------------------------------------------------- 
// (Singleton Implementation) getInstance() Method: 
//---------------------------------------------------------------------------------------------- 
static getInstance() : Globals 
{ 
    if (Globals.instance == null) 
    { 
     Globals.isCreating = true; 
     Globals.instance = new Globals(); 
     Globals.isCreating = false; 
    } 

    return Globals.instance; 
} 


//---------------------------------------------------------------------------------------------- 
// Properties Section (ScreenWidth): 
//---------------------------------------------------------------------------------------------- 
getScreenWidth() : number 
{ 
    return this.screenWidth; 
} 
//---------------------------------------------------------------------------------------------- 
setScreenWidth(val) : void 
{ 
    this.screenWidth = val; 
} 

//---------------------------------------------------------------------------------------------- 
// Properties Section (ScreenHeight): 
//---------------------------------------------------------------------------------------------- 
getScreenHeight() : number 
{ 
    return this.screenHeight; 
} 
//---------------------------------------------------------------------------------------------- 
setScreenHeight(val) : void 
{ 
    this.screenHeight = val; 
}} 

फिर भी आप इसका इस्तेमाल करने की जरूरत है ...

  1. आयात यह पहली

import {Globals} from './services/globals';

  1. एक निजी संपत्ति बनाने के लिए आपकी सेवा

के लिए एक संदर्भ पकड़ करने के लिए globals: Globals;

  1. जब से हम @Injectable() उपयोग नहीं कर रहे हम निर्माता में हमारी सेवा नहीं डालने चाहिए, तथापि के getInstance() विधि का उपयोग कर एक उदाहरण बनाने के लिए इस लाइन जोड़ने और इसे हमारी निजी संपत्ति को सौंपें।
this.globals = Globals.getInstance(); 
  1. अब आप अपने कोड में एक सिंगलटन के रूप में अपनी सेवा का उपयोग कर सकते हैं।
ngOnInit() 
{ 
    // Device Dimensions: 
    let that : any = this; 
    screensize.get().then((result) => { 
     setTimeout(()=> { 
      that.globals.setScreenWidth(result.width); 
      that.globals.setScreenHeight(result.height); 
     },50); 
    }, 
    (error) => { 
     // Do Nothing yet... 
    }); 
} 

मैं बिल्कुल बताया गया हो कि मैंने किया है क्योंकि मुझे पता है कि मेरे जैसे, वहाँ डेवलपर्स अभी भी आयोनिक 2 और कोणीय 2 में एक पकड़ हो रही के बहुत सारे हैं में एक छोटे से वर्बोज़ किया गया है, यह टन की लागत एक मंच सीखने के लिए घंटों के लिए और इस तरह के मुद्दों के साथ आप सचमुच चीजों को समझने के लिए दिन बिता सकते हैं, मुझे उम्मीद है कि यह समाधान आपके लिए काम करेगा और मुझे पता है कि अब तक यह अप्रचलित हो सकता है क्योंकि आयनिक 2 बीटा 6 अभी जारी किया गया था, मेरी सलाह है कि आप दोनों समाधानों का परीक्षण करें, पहले फोरम में से एक और यदि वह काम नहीं करता है, तो यह मेरे लिए काम करता है और मुझे आशा है कि इससे चीजें आपके लिए भी काम कर सकती हैं।

+0

मुझे समझ में नहीं आता कि यह लाइन कैसे काम करती है: 'ग्लोबल्स।उदाहरण = नए ग्लोबल्स(); ' मेरे मामले में, मुझे अपनी सेवा में एचटीपी का उपयोग करने की आवश्यकता है। तो मेरा नियंत्रक 'कन्स्ट्रक्टर (निजी http: Http)' जैसा है। तो 'नई कक्षा()' निर्देश _ "आपूर्ति पैरामीटर कॉल लक्ष्य के किसी भी हस्ताक्षर से मेल नहीं खाते हैं।" _ इस मामले में नई कक्षा कैसे घोषित कर सकते हैं? आपकी प्रतिक्रिया में सटीकता जोड़ने के लिए धन्यवाद – Xenofexs

3

धारण करने के लिए वैश्विक डेटा आयोनिक 2 बीटा 6 में मेरे लिए काम कर रहा है, और मैं इस पर विश्वास एक प्रदाता का उपयोग कोणीय 2.

में सिफारिश की प्रथा है कमांड लाइन से एक प्रदाता जनरेट करें: ionic g provider GlobalService सूचना कैसे उत्पन्न सेवा @Injectable

@App कक्षा में अपनी सेवा इंजेक्ट करें; आप प्रदाताओं सरणी में यह घोषणा कर ऐसा करते हैं:

@App({ 
     templateUrl: 'build/app.html', 
       providers: [GlobalService] , 
       config: {} // http://ionicframework.com/docs/v2/api/config/Config/ 
      }) 

यह अपने प्रदाता के एक उदाहरण है कि हर पेज पर नहीं पहुंच है पैदा करेगा। जहां भी आप इसका इस्तेमाल करने की जरूरत है, प्रदाताओं सरणी में घोषणा नहीं करते हैं, लेकिन पृष्ठ के निर्माता पर:

@Page({ 
     templateUrl: 'build/pages/new-page/new-page.html', 
     }) 
     export class NewPage{ 

     constructor(public globalService: GlobalService) { 
    } 

    someFunction(){ 
    this.globalService.someGlobalFunction(); 
    } 
संबंधित मुद्दे