| نطاق التوفير المتقدم | آلية التشغيل ومكان الإنشاء | متى يتم استخدامه هندسياً؟ |
|---|---|---|
| مستوى المنصة (`providedIn: 'platform'`) | يُنشئ نسخة واحدة على مستوى بيئة التشغيل ككل لتتشاركها جميع التطبيقات والوحدات المعزولة | عند الحاجة لمشاركة خدمات أساسية (مثل التسجيل أو التهيئة العامة) عبر عدة تطبيقات فرعية مستقلة |
| مستوى أي وحدة لتحميل كسول (`providedIn: 'any'`) | يُنشئ نسخة فريدة لكل وحدة تحميل كسول (`Lazy-loaded Module`) أو يشارك نسخة الجذر إن لم تكن محملة كسلساً | عند الرغبة في فصل حالات الخدمات وتخصيص نسخة مستقلة لكل حزمة برمجية يتم تحميلها على حدة |
لا يقتصر توفير الخدمات على الجذر (root) أو النطاق المحلي للمكونات فحسب، بل يتيح إطار العمل خيارات متقدمة وموجهة للأنظمة المعقدة وتطبيقات الـ Micro-frontends مثل providedIn: 'any' و providedIn: 'platform'. تمنحك هذه الخيارات تحكماً استثنائياً في كيفية مشاركة وحفظ نسخ الخدمات عبر سياقات التشغيل المختلفة والمنصات المشتركة.
تطبيق Angular الأساسي يعمل داخل منصة معينة (Platform). عند استخدام providedIn: 'platform', تضمن أن الخدمة عبارة عن نسخة واحدة مطلقة (Singleton) تخدم جميع التطبيقات والوحدات حتى لو كانت مفصولة تماماً عن بعضها في نفس الصفحة.
باستخدام providedIn: 'any', يحصل كل Lazy-loaded Module على نسخته الخاصة من الخدمة، بينما تشترك الوحدات العادية في نسخة الجذر، مما يوفر توازناً دقيقاً في إدارة الحالة للأجزاء الكبيرة من التطبيق.
| 1 | import { Injectable } from '@angular/core'; |
| 2 | |
| 3 | @Injectable({ |
| 4 | // توفير الخدمة على مستوى المنصة لتتشاركها التطبيقات الفرعية |
| 5 | providedIn: 'platform', |
| 6 | }) |
| 7 | export class PlatformConfigService { |
| 8 | private readonly appVersion = '22.1.0-Enterprise'; |
| 9 | |
| 10 | getAppVersion(): string { |
| 11 | return this.appVersion; |
| 12 | } |
| 13 | } |
| 1 | import { Component, inject } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { PlatformConfigService } from './platform-config.service'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-platform-demo', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule], |
| 9 | template: ` |
| 10 | <div class="platform-container"> |
| 11 | <h3>لوحة توضيح نطاقات التوفير المتقدمة (Platform & Any)</h3> |
| 12 | <p class="info-text">إصدار المنصة المشترك: <strong>{{ version }}</strong></p> |
| 13 | </div> |
| 14 | `, |
| 15 | styles: [` |
| 16 | .platform-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; border: 1px solid #1e293b; margin-top: 10px; } |
| 17 | .info-text { background: #1e293b; padding: 12px; border-radius: 6px; color: #38bdf8; font-weight: bold; } |
| 18 | `] |
| 19 | }) |
| 20 | export class PlatformDemoComponent { |
| 21 | private readonly platformService = inject(PlatformConfigService); |
| 22 | |
| 23 | readonly version = this.platformService.getAppVersion(); |
| 24 | } |