यदि आप वेबसाइट विकसित कर रहे हैं, तो संभवतः आप घटक टेम्पलेट्स में बहुत सारा पाठ लिख रहे हैं:

इस तरह का पाठ लिखना टूटा-फूटा या खराब नहीं है, बल्कि लंबे समय तक चलने वाली परियोजनाओं को बनाए रखने के लिए थकाऊ है। इसे बेहतर बनाने के लिए, आप किसी विशेष सुविधा के लिए सभी टेक्स्ट वाली एक फ़ाइल बना सकते हैं और सही कुंजियाँ आयात करके इसे पूरे ऐप में पुन: उपयोग कर सकते हैं।

यह फ़ाइल हो सकती है:

• JSON फ़ाइल
• टाइपस्क्रिप्ट फ़ाइल

मैं दोनों दृष्टिकोणों के फायदे और नुकसान का वर्णन करूंगा।

I) JSON अनुवाद फ़ाइल

(1) एक JSON फ़ाइल बनाएँ

अपने प्रोजेक्ट की मूल निर्देशिका में, src/assets पर जाएं और एक नया फ़ोल्डर (वर्डिंग) और एक JSON फ़ाइल (वर्डिंग.json) बनाएं:

? src 
|__ ? assets
|_____ ? wording
|_______ wording.json

और अपने अनुवाद जोड़ें:

{
  "APP": {
    "TITLE": "Movies App",
    "DESCRIPTION": "The best site for movies"
  },
  "COMMON": {
    "BUTTON": "Peek In"
  },
  "MOVIES": {
    "BATMAN": {
      "TITLE": "Batman",
      "SERIES": {
        "THE_DARK_KNIGHT": {
          "TITLE": "The Dark Knight Series",
          "MOVIES": {
            "BATMAN_BEGINS": {
              "TITLE": "Batman Begins",
              "DESCRIPTION": "Bruce learns the art of fighting to confront injustice."
            },
            "THE_DARK_KNIGHT": {
              "TITLE": "The Dark Knight",
              "DESCRIPTION": "Lorem Ipsum"
            },
            "THE_DARK_KNIGHT_RISES": {
              "TITLE": "The Dark Knight Rises",
              "DESCRIPTION": "Lorem Ipsum"
            }
          }
        }
      }

    }
  }
}

(2) TSConfig को अपडेट करें

यदि आवश्यक हो, तो ECMAScript मॉड्यूल में JSON फ़ाइलों को आयात करने की अनुमति देने के लिए tsconfig.json कंपाइलरऑप्शंस में reformJsonModule: true जोड़ें:

{
  "compilerOptions": {
    "resolveJsonModule": true, // Add this line to tsconfig.json
  }
}

(3) JSON फ़ाइल का उपयोग करें

फ़ाइल को सीधे घटक में आयात करें

// component file
import wording from '../../assets/wording/wording.json';

@Component({...}) 
export class HomeComponent implements OnInit {

  public pageText!: any;

  ngOnInit(): void {
    this.pageText = wording.MOVIES.BATMAN;
  }

}

या एक ऐसी सेवा बनाएं जो विश्व स्तर पर सभी शब्दों को आयात करे:

// translations.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class TranslationsService {

  public wording!: any;

  constructor(private http: HttpClient) {
    this.setTranslations();
  }

  private setTranslations() {
    this.http.get('./assets/wording/wording.json').subscribe(data => {
      this.wording = data;
     });
  }

}

और फिर सेवा को अपने घटक में इंजेक्ट करें।

@Component({...}) 
export class HomeComponent implements OnInit {

  public pageText!: any;

  constructor(private readonly translationsService: TranslationsService) {}

  ngOnInit(): void {
    this.pageText = this.translationsService.wording.MOVIES.BATMAN;
  }

}

हालाँकि, इस दृष्टिकोण का नकारात्मक पक्ष यह है कि आपके पास पाठ्य सामग्री के लिए कोई इंटेलिजेंस नहीं है।

  

    {{ pageText.TITLE }}
    
    
{{ pageText.HELLO_WORLD }}
  

इसे हल करने के लिए, आपको संपूर्ण वर्डिंग.जेसन फ़ाइल या घटक में उपयोग किए जा रहे विशेष ऑब्जेक्ट ("बैटमैन") के आसपास एक कस्टम प्रकार या एक इंटरफ़ेस बनाना होगा।

II) टाइपस्क्रिप्ट अनुवाद फ़ाइल

ऐसा करने का दूसरा तरीका JSON फ़ाइल को हटा देना और इसके बजाय एक टाइपस्क्रिप्ट फ़ाइल बनाना है।

(1)

src/app में कहीं भी नई Wording.ts फ़ाइल बनाएं

// wording.ts
const WORDING = {
  APP: {
    TITLE: 'Movies App',
    DESCRIPTION: 'The best site for movies',
  },
  COMMON: {
    BUTTON: 'Peek In',
  },
  MOVIES: {
    BATMAN: {
      TITLE: 'Batman',
      SERIES: {
        THE_DARK_KNIGHT: {
          TITLE: 'The Dark Knight Series',
          MOVIES: {
            BATMAN_BEGINS: {
              TITLE: 'Batman Begins',
              DESCRIPTION:
                'Bruce learns the art of fighting to confront injustice.',
            },
            THE_DARK_KNIGHT: {
              TITLE: 'The Dark Knight',
              DESCRIPTION: 'Lorem Ipsum',
            },
            THE_DARK_KNIGHT_RISES: {
              TITLE: 'The Dark Knight Rises',
              DESCRIPTION: 'Lorem Ipsum',
            },
          },
        },
      },
    },
  },
};

export default WORDING;

(2) एक क्लास बनाएं जो इस फ़ाइल से पढ़े

आप किसी भी वांछित घटक में एक नई Wordings.ts फ़ाइल आयात कर सकते हैं। हालाँकि, मैं एक कस्टम (यूज़वर्डिंग) क्लास बनाना चाहता हूँ जो इस फ़ाइल से पढ़े।

// use-wording.ts

import WORDING from './wording';

/**
 * Wrapper for translation wording
 */
export default class UseWording {

  get useWording() {
    return WORDING
  }
}

(3) अपने घटकों में यूज़वर्डिंग क्लास को इनरिट करें

import { Component } from '@angular/core';
import UseWording from '../../../shared/translations/use-wording';

@Component({...})
export class HomeComponent extends UseWording {
  readonly pageText = this.useWording.MOVIES.BATMAN
}

इसके साथ, आप तुरंत टेम्पलेट में इंटेलिजेंस देख सकते हैं।

इसके अतिरिक्त, आप अधिक वर्ग गुण बना सकते हैं जो शब्दांकन ऑब्जेक्ट में विशिष्ट कुंजियों को लक्षित करते हैं:

@Component({...})
export class HomeComponent extends UseWording {
  readonly pageText = this.useWording.MOVIES.BATMAN;
  readonly movies = this.useWording.MOVIES.BATMAN.SERIES.THE_DARK_KNIGHT.MOVIES;
  readonly common = this.useWording.COMMON;
}

  

    {{ pageText.TITLE }}
    
{{ pageText.SERIES.THE_DARK_KNIGHT.TITLE }}
  

  

    

      
{{ movies.BATMAN_BEGINS.TITLE }}
      

        {{ movies.BATMAN_BEGINS.DESCRIPTION }}
      
      {{ common.BUTTON }}
    
    

      
{{ movies.THE_DARK_KNIGHT.TITLE }}
      

        {{ movies.THE_DARK_KNIGHT.DESCRIPTION }}
      
      {{ common.BUTTON }}
    
    

      

        {{ movies.THE_DARK_KNIGHT_RISES.TITLE }}
        

          {{ movies.THE_DARK_KNIGHT_RISES.DESCRIPTION }}
        
        {{ common.BUTTON }}
      
    
  

ध्यान दें कि यदि आपका क्लास घटक कंस्ट्रक्टर के माध्यम से निर्भरता इंजेक्ट करता है, तो कंस्ट्रक्टर में एक 'सुपर' कॉल होनी चाहिए।

export class MyComponent extends UseWording {

  searchAccountsForm!: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {
    super(); // 



और JSON की तरह ही, यदि आपको किसी शीर्षक या विवरण को बदलने की आवश्यकता है, तो आप इसे एकाधिक फ़ाइलों/घटकों को बदलने के बजाय एक ही स्थान (wording.ts) में करते हैं।


  
  
  ऊपर लपेटकर


यह आलेख कोणीय घटकों में शब्दों का उपयोग करने के दो तरीकों को प्रदर्शित करता है। दोनों तरीकों के फायदे और नुकसान हैं।

टाइपस्क्रिप्ट फ़ाइल का उपयोग करने से चीज़ें तेज़ हो जाती हैं और इंटेलिजेंस का ध्यान रखती हैं, लेकिन यह कई भाषाओं के साथ काम करने के लिए उपयुक्त नहीं हो सकती है।

JSON फ़ाइल का उपयोग करने के लिए कुछ अतिरिक्त काम की आवश्यकता होती है, लेकिन यह तब फायदेमंद होता है जब विभिन्न तकनीकों (जो JSON प्रारूप का समर्थन करते हैं) के साथ बनाए गए विभिन्न ऐप्स में सटीक अनुवाद का उपयोग किया जाता है।

अगर आपने कुछ नया सीखा है, तो फॉलो बटन दबाना न भूलें। साथ ही, मेरी आगामी सामग्री से अपडेट रहने के लिए मुझे ट्विटर पर फ़ॉलो करें।

अभी के लिए बाय ?