تحقيق فاعلية في Angular 2 باستخدام Observables لإدارة تغييرات اللغة

في Angular 2، يمكنك استخدام ميزة الـ “Observables” للتعامل مع تغييرات في الخدمات والقيم التي تحتويها. في هذا السياق، يمكننا تعديل خدمة الترجمة (translate.service.ts) لتصبح قابلة للاشتراك في قيمتها باستخدام Observable. سنقوم بتحديث الأكواد على النحو التالي:

typescriptCopy code
// translate.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TranslateService {
  private dictSubject = new BehaviorSubject<{ [key: string]: any }>({ "en": {} });
  dict$ = this.dictSubject.asObservable();
  lang = "en";

  setLang(lang: string) {
    this.lang = lang;
    // يقوم بإشعار المشتركين بتغيير في القاموس
    this.dictSubject.next(this.dict);
  }

  getDict() {
    return this.dictSubject.value;
  }
}

في السياق السابق، قمت بإضافة BehaviorSubject و Observable للتعامل مع التغييرات في الخدمة. الآن سنقوم بتعديل الكود في الثاني component (Second component) للاشتراك في التغييرات:

typescriptCopy code
// second.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { TranslateService } from 'path-to-translate.service'; // استبداله بالمسار الصحيح

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit, OnDestroy {
  dict: { [key: string]: any };
  private subscription: Subscription;

  constructor(private _translateService: TranslateService) { }

  ngOnInit() {
    this.dict = this._translateService.getDict();

    // الاشتراك في التغييرات في الخدمة
    this.subscription = this._translateService.dict$.subscribe((newDict) => {
      this.dict = newDict;
    });
  }

  ngOnDestroy() {
    // إلغاء الاشتراك عند تدمير المكون
    this.subscription.unsubscribe();
  }
}

بهذا الشكل، عندما يتم تغيير اللغة في الخدمة (TranslateService)، سيتم إشعار المكون الثاني (SecondComponent) بالتغييرات وسيقوم بتحديث قاموس الترجمة (this.dict) بشكل تلقائي.

بالتأكيد، سنقدم المزيد من المعلومات لتوضيح كيفية تحقيق هذا النهج في Angular 2.

1. Observable و BehaviorSubject:

   • BehaviorSubject هو نوع خاص من Observables يحتفظ بقيمته الحالية ويقوم بإرسالها إلى أي مشترك في الوقت الذي يشترك فيه.
   • Observable هو نوع يستخدم للتعامل مع التغييرات في القيم عبر الزمن. في هذا السياق، يتم استخدام dict$ كـ Observable للاشتراك في التغييرات في الخدمة.

2. استخدام Subscription:

   • Subscription تُستخدم للإشتراك في Observables وإلغاء الإشتراك عندما لا تكون الحاجة موجودة، مما يمنحك التحكم في دورة حياة المكون.

3. تحديث قاموس الترجمة تلقائيًا:

   • عندما يتم استدعاء setLang في الخدمة، يتم تغيير قيمة lang وبالتالي يتم إشعار المشتركين (dict$) بالتغيير، وبالتالي يتم تحديث dict في المكون الثاني بشكل تلقائي.

4. تحقيق فاعلية في الأداء:

   • باستخدام Observables، يمكنك تحقيق فاعلية في الأداء عن طريق تحميل البيانات فقط عند الحاجة، وذلك بفضل الاشتراك في التغييرات بدلاً من استرجاع القيم بشكل دائم.

5. التحقق من الإشتراك عند تدمير المكون:

   • باستخدام ngOnDestroy، يتم إلغاء الاشتراك في التغييرات عند تدمير المكون، مما يمنع أي تسريب غير ضروري للذاكرة.

بهذا الشكل، يتم تحقيق نظام فعال ورشيق لإدارة تغييرات اللغة في تطبيق Angular 2 بطريقة تعزز القابلية للصيانة والفاعلية في الأداء.