إذا كنت تقوم بتطوير مواقع الويب، فمن المحتمل أنك تكتب الكثير من النصوص في قوالب المكونات:

كتابة نص مثل هذا ليست مكسورة أو بها أخطاء ولكنها مرهقة للمحافظة عليها للمشاريع طويلة الأمد. لتحسين ذلك، يمكنك إنشاء ملف يحتوي على كل النص الخاص بميزة معينة وإعادة استخدامه في جميع أنحاء التطبيق عن طريق استيراد المفاتيح الصحيحة.

يمكن أن يكون هذا الملف:

• ملف JSON
• ملف تايب سكريبت

سأصف إيجابيات وسلبيات كلا النهجين.

ط) ملف ترجمات JSON

(1) قم بإنشاء ملف JSON

في الدليل الجذر لمشروعك، انتقل إلى src/assets وقم بإنشاء مجلد جديد (wording) وملف JSON (wording.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

إذا لزم الأمر، أضف ResolveJsonModule: true إلى خيارات التحويل البرمجي tsconfig.json للسماح باستيراد ملفات JSON إلى وحدات ECMAScript:

{
  "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 }}
  

لحل هذه المشكلة، يتعين عليك إنشاء نوع مخصص أو واجهة حول ملف wording.json بالكامل أو الكائن المحدد ("Batman") الذي تستخدمه في المكون.

II) ملف ترجمات TypeScript

هناك طريقة أخرى للقيام بذلك وهي التخلص من ملف JSON وإنشاء ملف Typescript بدلاً من ذلك.

(1)

إنشاء ملف wording.ts جديد في أي مكان في src/app

// 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 جديد في أي مكون مطلوب. ومع ذلك، أود إنشاء فئة مخصصة (UseWording) للقراءة من هذا الملف.

// use-wording.ts

import WORDING from './wording';

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

  get useWording() {
    return WORDING
  }
}

(3) أدخل فئة UseWording في مكوناتك

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) بدلاً من تغيير ملفات/مكونات متعددة.


  
  
  التفاف


 توضح هذه المقالة طريقتين لاستخدام الصياغة في المكونات Angular. كلا الطريقتين لهما مزايا وعيوب.

يؤدي استخدام ملف TypeScript إلى تسريع الأمور والاهتمام بالذكاء، ولكنه قد لا يكون مناسبًا للعمل مع لغات متعددة.

يتطلب استخدام ملف JSON بعض العمل الإضافي، ولكنه يكون مفيدًا عند استخدام الترجمات الدقيقة عبر تطبيقات متنوعة تم إنشاؤها باستخدام تقنيات مختلفة (تدعم تنسيق JSON).

إذا تعلمت شيئا جديدا فلا تنسى الضغط على زر المتابعة. تابعني أيضًا على Twitter لتبقى على اطلاع دائم بالمحتوى القادم.

وداعا الآن ؟