कोणीय 4/5/6 वैश्विक चर

116

मैं वास्तव में अपने कोणीय 2 अनुप्रयोग में वैश्विक चर बनाने के साथ संघर्ष करता हूं।

मैंने पहले से ही पिछले 3 घंटों के लिए इस पर StackOverflow पर कई पोस्ट्स पढ़े और पढ़े, हालाँकि ऐसा लगता है कि मैं अभी कोई काम नहीं कर सकता। मुझे वास्तव में उम्मीद है कि आप मेरी मदद कर सकते हैं और मैं यह सवाल पूछने के लिए माफी चाहता हूं।

तो मेरे पास ग्लोबल्स.ट्स नामक मेरी फाइल है , जो इस तरह दिखती है:

import { Injectable } from "@angular/core";


@Injectable()
export class Globals {

  var role = 'test';

}

और मैं इस तरह से अपने घटक के अपने HTML दृश्य में चर भूमिका का उपयोग करना चाहता हूं:

{{ role }}

मैंने पहले से ही अपने app.module.ts में globals.ts फ़ाइल को निम्न तरीके से जोड़ा है :

providers: [
  Globals
],

कोई फर्क नहीं पड़ता कि मैंने इस फाइल पर क्या किया, यह सिर्फ काम नहीं करता था। जो मैं नहीं करना चाहता, वह यह है कि ग्लोबल्स.टीएस फाइल को हर कंपोनेंट में मैन्युअली इम्पोर्ट किया जाए, यही वजह है कि मैं प्रोवाइडर्स फीचर का इस्तेमाल करना चाहता हूं।

मुझे वास्तव में उम्मीद है कि आप मेरी मदद कर सकते हैं और फिर से क्षमा कर सकते हैं।

सादर,

एई

angular typescript

— एई
स्रोत

4

export class Globals { var role = 'test'; }<- वह क्या है?

— झटके

यह मेरा वर्ग ग्लोबल्स माना जाता है जिसमें मैं अपने वैश्विक चरों को संग्रहीत करना चाहता हूं। उदाहरण के लिए चर "भूमिका", जिसमें अभी एक स्ट्रिंग "परीक्षण" होना चाहिए, बस यह परीक्षण करने के लिए कि वैश्विक चर काम करते हैं।

— AE

हालांकि यह वैध टाइपस्क्रिप्ट नहीं है।

— झटके

क्या मुझे "var" को हटा देना चाहिए?

— AE

उपयोग करने के बारे में क्या localStorage?

— सुहैलव्स

180

आप कोणीय निर्भरता इंजेक्शन केGlobals माध्यम से अपने ऐप के किसी भी बिंदु से इकाई का उपयोग कर सकते हैं । यदि आप कुछ घटक के टेम्पलेट में मूल्य का उत्पादन करना चाहते हैं , तो आपको किसी भी सेवा की तरह घटक के निर्माता के माध्यम से इंजेक्ट करना चाहिए :Globals.roleGlobals

// hello.component.ts
import { Component } from '@angular/core';
import { Globals } from './globals';

@Component({
  selector: 'hello',
  template: 'The global role is {{globals.role}}',
  providers: [ Globals ] // this depends on situation, see below
})

export class HelloComponent {
  constructor(public globals: Globals) {}
}

मैंने अंदर प्रदान Globalsकिया HelloComponent, लेकिन इसके बजाय यह कुछ HelloComponent'sमूल घटक या यहां तक कि में प्रदान किया जा सकता है AppModule। यह तब तक मायने नहीं रखेगा जब तक कि आपके Globalsपास केवल स्थिर डेटा न हो जिसे बदला नहीं जा सकता (जैसे, केवल स्थिरांक)। लेकिन अगर यह सच नहीं है और उदाहरण के लिए विभिन्न घटक / सेवाएँ उस डेटा को बदलना चाहते हैं, तो Globalsएक सिंगलटन होना चाहिए । उस स्थिति में इसे पदानुक्रम के शीर्ष स्तर पर प्रदान किया जाना चाहिए जहां इसका उपयोग होने जा रहा है। मान लीजिए कि यह है AppModule:

import { Globals } from './globals'

@NgModule({
  // ... imports, declarations etc
  providers: [
    // ... other global providers
    Globals // so do not provide it into another components/services if you want it to be a singleton
  ]
})

इसके अलावा, यह उपयोग करने के लिए असंभव है वर तरह से तुमने किया था, यह होना चाहिए

// globals.ts
import { Injectable } from '@angular/core';

@Injectable()
export class Globals {
  role: string = 'test';
}

अपडेट करें

अंत में, मैंने स्टैकब्लिट्ज़ पर एक सरल डेमो बनाया , जहां सिंगल Globalsको 3 घटकों के बीच साझा किया जा रहा है और उनमें से एक मूल्य बदल सकता है Globals.role।

— dhilt
स्रोत

3

लेकिन जब मैं इसे किसी अन्य घटक (कुछ = globals.role;) में प्राप्त करता हूं, तो मुझे 'परीक्षण' मिलता है .. वह मान जो मैंने सौंपा है।

— पंकटर

3

@ पंक राउटर मैंने एक प्लंकर डेमो लिंक के साथ उत्तर को अपडेट किया। आशा है इससे आपकी मदद होगी!

— dhilt

3

यह कुछ हद तक एक पुराना धागा है, लेकिन मैं सिर्फ यह कहना चाहता हूं कि मैं तुमसे प्यार करता हूं। मेरा दिन बचाया!

— नी सेलम

2

@AtulStha मैं सिर्फ प्लंकर से स्टैकब्लिट्ज़ में डेमो स्थानांतरित किया, इस मुद्दे के लिए धन्यवाद।

— dhilt

1

@ गौरवश्चदेव आप अपना मुद्दा एसओ पर एक अलग प्रश्न के रूप में पोस्ट कर सकते हैं, मेरा मानना है कि यह सबसे अच्छा विकल्प होगा। अगर आप मुझे इस पर देखना चाहते हैं तो टिप्पणियों में इसे लिंक करें।

— dhilt

22

मैं उसके लिए पर्यावरण का उपयोग करता हूं। यह स्वचालित रूप से काम करता है और आपको मेरे लिए नई इंजेक्टेबल सेवा और सबसे उपयोगी बनाने की ज़रूरत नहीं है, कंस्ट्रक्टर के माध्यम से आयात करने की आवश्यकता नहीं है।

1) अपने environment.ts में पर्यावरण चर बनाएं

export const environment = {
    ...
    // runtime variables
    isContentLoading: false,
    isDeployNeeded: false
}

2) आयात environment.ts * .ts फ़ाइल में और बनाने के सार्वजनिक चर (यानी "env") एचटीएमएल टेम्पलेट में उपयोग करने के लिए सक्षम होने के लिए

import { environment } from 'environments/environment';

@Component(...)
export class TestComponent {
    ...
    env = environment;
}

3) टेम्पलेट में इसका उपयोग करें ...

<app-spinner *ngIf='env.isContentLoading'></app-spinner>

* .ts। में ...

env.isContentLoading = false

(या सिर्फ पर्यावरण। इस टेम्पलेट के मामले में आपको इसकी आवश्यकता नहीं है)

आप पर्यावरण के भीतर ग्लोबल्स का अपना सेट बना सकते हैं।

export const globals = {
    isContentLoading: false,
    isDeployNeeded: false
}

और सीधे इन चर (y) का आयात करें

— मार्टिन स्लावकोवस्की
स्रोत

1

जब आप उत्पादन का निर्माण करते हैं तो क्या होता है? क्या आपके पास दो जगहों पर सब कुछ है?

— मुलपेरी

2

यह सबसे अच्छा तरीका है। @Mulperi environment.ts में ग्लोबल्स बनाने के लिए आवश्यक नहीं है। बस ऊपर निर्यात के साथ app निर्देशिका में एक globals.ts बनाएं और इस फ़ाइल को आयात करें जहां आप उन ग्लोबल्स का उपयोग करना चाहते हैं।

— प्रसादडब्ल्यू

1

मैं सहमत हूँ। मैंने हाल ही में इस समाधान को ठीक वैसे ही संशोधित किया जैसे @PrasadW ने बताया।

— मार्टिन स्लावकोवस्की

नए कोणीय संस्करण अभी डिफ़ॉल्ट रूप से उस दृष्टिकोण का उपयोग करते हैं। वहाँ एक है environments/environment.tsऔर environments/environment.prod.tsयह स्वचालित रूप से बदल दिया जाता है।

— गलीचा

0

वास्तव में अनुशंसित नहीं है, लेकिन अन्य उत्तरों में से कोई भी वास्तव में वैश्विक चर नहीं हैं। वास्तव में वैश्विक चर के लिए आप ऐसा कर सकते हैं।

index.html

<body>
  <app-root></app-root>
  <script>
    myTest = 1;
  </script>
</body>

कोणीय में घटक या कुछ और

.. आयात के बाद शीर्ष दाईं ओर देखें:

declare const myTest: any;

...बाद में:

console.warn(myTest); // outputs '1'

— Helzgate
स्रोत

-2

आप विंडो ऑब्जेक्ट का उपयोग कर सकते हैं और इसे कभी भी एक्सेस कर सकते हैं। उदाहरण window.defaultTitle = "मेरा शीर्षक"; तब आप बिना कुछ आयात किए window.defaultTitle का उपयोग कर सकते हैं।

— जस्टिस एडिको
स्रोत

यही वह बचना चाहता है।

— स्कैंडिनेव