কৌণিক 4/5/6 গ্লোবাল ভেরিয়েবল

Question

আমি আমার কৌণিক 2 অ্যাপ্লিকেশনটিতে বিশ্বব্যাপী পরিবর্তনগুলি তৈরির সাথে সত্যই সংগ্রাম করছি।

আমি ইতিমধ্যে স্ট্যাক ওভারফ্লোতে গত 3 ঘন্টা ধরে বেশ কয়েকটি পোস্ট গুগল করেছি এবং পড়েছি, তবে মনে হচ্ছে এটি ঠিক কাজ করতে পারি না। আমি সত্যিই আশা করি আপনি আমাকে সাহায্য করতে পারেন এবং আমি এই প্রশ্নটি জিজ্ঞাসা করার জন্য ক্ষমা চাই।

সুতরাং আমার কাছে আমার ফাইলটি globals.ts নামে ডাকা হয়েছে , যা দেখতে এটির মতো দেখাচ্ছে:

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


@Injectable()
export class Globals {

  var role = 'test';

}

এবং আমি আমার উপাদানটির এইচটিএমএল ভিউতে এই পরিবর্তনশীল ভূমিকাটি ব্যবহার করতে চাই:

{{ role }} 

আমি ইতিমধ্যে আমার app.module.ts ফাইলগুলিতে নিম্নলিখিত উপায়ে globals.ts ফাইল যুক্ত করেছি :

providers: [
  Globals
],

এই ফাইলটিতে আমি যা করেছি তা বিবেচনা করেই এটি কাজ করে না। আমি যা করতে চাই না তা হ'ল গ্লোবাল.এসটি ফাইলটি প্রতিটি উপাদানগুলিতে ম্যানুয়ালি আমদানি করা হয়, এজন্য আমি সরবরাহকারী বৈশিষ্ট্যটি ব্যবহার করতে চাই।

আমি সত্যিই আশা করি আপনি আমাকে সাহায্য করতে পারেন এবং আবার দুঃখিত।

শুভেচ্ছান্তে,

ই

Comments

export class Globals { var role = 'test'; }<- ওটা কি?

— zerkms

এটি আমার ক্লাস গ্লোবাল বলে মনে করা হচ্ছে যেখানে আমি আমার বিশ্বব্যাপী ভেরিয়েবল সঞ্চয় করতে চাই। উদাহরণস্বরূপ ভেরিয়েবল "রোল", যার এখনই স্ট্রিং "টেস্ট" থাকা উচিত, কেবলমাত্র বৈশ্বিক চলকগুলি কাজ করে কিনা তা পরীক্ষা করার জন্য।

— এই

যদিও এটি বৈধ টাইপস্ক্রিপ্ট নয়।

— zerkms

আমি কি "ভার" অপসারণ করব?

— এই

ব্যবহার সম্পর্কে কি localStorage?

— suhailvs

Answer 1

কৌণিক নির্ভরতা ইনজেকশনের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';
}

হালনাগাদ

শেষ অবধি , আমি স্ট্যাকব্লিটজে একটি সাধারণ ডেমো তৈরি করেছি , যেখানে এককটি Globals3 টি উপাদানের মধ্যে ভাগ করা হচ্ছে এবং এর মধ্যে একটির মান পরিবর্তন করতে পারে Globals.role।

Comments

তবে আমি যখন এটি অন্য উপাদানটিতে পেয়েছি (কিছু = গ্লোবাল.রোল;) আমি 'পরীক্ষা' পাই .. আমি যে মূল্য নির্ধারণ করেছি তা নয়।

— পঙ্কউটার

@ পঙ্কুটার আমি প্লঙ্কার ডেমো লিঙ্কটি দিয়ে উত্তরটি আপডেট করেছি। আশা করি এটা তোমাকে সাহায্য করবে!

— ধিল্ট

এটি কিছুটা পুরানো থ্রেড তবে আমি কেবল আপনাকে ভালবাসি বলতে চাই। আমার দিন বাঁচা!

— নি সেলাম

@ অতুলসথা আমি ইস্যুটির জন্য ধন্যবাদ, প্লঙ্কার থেকে স্ট্যাকব্লিটজে সবেমাত্র ডেমো স্থানান্তরিত করেছি।

— ধিল্ট

@ গৌরবসচদেব আপনি নিজের বিষয়টিকে একটি পৃথক প্রশ্ন হিসাবে এসও তে পোস্ট করতে পারেন, আমি বিশ্বাস করি এটি সেরা বিকল্প হবে। আপনি যদি আমাকে এটি দেখতে চান তবে মন্তব্যগুলিতে এটির লিঙ্ক যুক্ত করুন।

— ধূলি

Answer 2

আমি তার জন্য পরিবেশ ব্যবহার করি। এটি স্বয়ংক্রিয়ভাবে কাজ করে এবং আপনাকে নতুন ইনজেকশনযোগ্য পরিষেবা তৈরি করতে হবে না এবং আমার জন্য সবচেয়ে দরকারী, কনস্ট্রাক্টরের মাধ্যমে আমদানি করার দরকার নেই।

1) আপনার পরিবেশে পরিবর্তনশীল পরিবেশ তৈরি করুন

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

২) এইচটিএমএল টেমপ্লেটে ব্যবহার করতে সক্ষম হতে * .ts ফাইল-এ ফাইল এনভায়রনমেন্টমেন্টস এবং জনসাধারণের পরিবর্তনশীল (যেমন "এনভিভি") তৈরি করুন )

import { environment } from 'environments/environment';

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

3) এটি টেমপ্লেটে ব্যবহার করুন ...

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

ইন * .ts ...

env.isContentLoading = false 

(অথবা কেবল পরিবেশ.আইস কনটেন্টলয়েড আপনি যদি টেমপ্লেটের জন্য এটির প্রয়োজন না হন)

---

আপনি পরিবেশের মধ্যে গ্লোবালগুলির নিজস্ব সেট তৈরি করতে পারেন ts

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

এবং সরাসরি এই পরিবর্তনকগুলি আমদানি করুন (y)

Comments

আপনি উত্পাদন তৈরি যখন সম্পর্কে কি? আপনার কি দুটি জায়গায় সব আছে?

— মুল্পেরি

এটি সেরা উপায়। @ মাল্পেরি এনভায়রনমেন্ট.টেসে গ্লোবাল তৈরি করার প্রয়োজন নেই। উপরের রফতানির সাহায্যে কেবল অ্যাপ ডিরেক্টরিতে একটি গ্লোবাল.এসটি তৈরি করুন এবং এই ফাইলটি যেখানে আপনি সেই গ্লোবালগুলি ব্যবহার করতে চান তা আমদানি করুন।

— প্রসাদ ডব্লু

আমি রাজী. আমি সম্প্রতি @ প্রসাদডাব্লু নির্দেশিত মতো ঠিক এই সমাধানটি পরিবর্তন করেছি।

— মার্টিন স্লাভকভস্কি

নতুন কৌণিক সংস্করণগুলি এখন ডিফল্টরূপে ঠিক সেই পদ্ধতির ব্যবহার করে। একটি environments/environment.tsএবং environments/environment.prod.tsএটি স্বয়ংক্রিয়ভাবে প্রতিস্থাপন করা হয়।

— rugk

Answer 3

সত্যই প্রস্তাবিত নয় তবে অন্যান্য উত্তরগুলির মধ্যে কোনওটিই বিশ্বব্যাপী পরিবর্তনীয় নয়। সত্যিকারের গ্লোবাল ভেরিয়েবলের জন্য আপনি এটি করতে পারেন।

index.html

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

কৌণিকের উপাদান বা অন্য কিছু

.. আমদানির পরে উপরের ডানদিকে:

declare const myTest: any;

... পরে:

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

Answer 4

আপনি উইন্ডো অবজেক্টটি ব্যবহার করতে এবং এটি যে কোনও জায়গায় অ্যাক্সেস করতে পারেন। উদাহরণ উইন্ডো.ডিফল্টিটিটল = "আমার শিরোনাম"; তারপরে আপনি কিছু আমদানি না করেই উইন্ডো.ডিফল্ট টাইটেল অ্যাক্সেস করতে পারবেন।

Comments

এটি এড়াতে চায় এটি।

— স্ক্যান্ডিনেভ