| الدالة المساعدة (`Helper Function`) | بيئة التنفيذ المستهدفة للتحقق | الاستخدام البرمجي الآمن |
|---|---|---|
| `isPlatformBrowser` | التحقق مما إذا كان الكود يعمل حالياً داخل متصفح المستخدم | تنفيذ الأكواد التي تعتمد على `window` أو التخزين المحلي بأمان تام |
| `isPlatformServer` | التحقق مما إذا كان الكود يعمل حالياً على بيئة الخادم (`Node.js`) | تنفيذ المهام الخاصة بالخادم وتجنب استدعاء واجهات المتصفح نهائياً |
عند تشغيل التطبيق على بيئة الخادم (Node.js), لا توجد كائنات مثل window أو document أو localStorage لأنها خاصة بالمتصفح فقط. يتيح لك نظام Angular 22.1 استخدام توكن PLATFORM_ID مع الدوال المساعدة isPlatformBrowser و isPlatformServer للتحقق من بيئة التشغيل الحالية قبل تنفيذ أي كود خاص بالمتصفح، مما يمنع انهيار التطبيق أثناء العرض على الخادم.
محاولة الوصول إلى كائن غير موجود مثل window على الخادم تتسبب فوراً في توقف عملية العرض، وهنا يأتي دور حماية المنصة.
يتم حقن معرف المنصة عبر دالة inject(PLATFORM_ID) لمعرفة مكان تنفيذ الشفرة البرمجية لحظة بلحظة.
| 1 | import { Component, OnInit, PLATFORM_ID, inject } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { isPlatformBrowser } from '@angular/common'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-safe-storage', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule], |
| 9 | template: ` |
| 10 | <div class="card"> |
| 11 | <h3>التعامل الآمن مع كائنات المتصفح</h3> |
| 12 | <p><strong>قيمة التخزين المحلي:</strong> {{ storedValue }}</p> |
| 13 | </div> |
| 14 | `, |
| 15 | styles: [` |
| 16 | .card { background: #090d16; color: #fff; padding: 24px; border-radius: 8px; border: 1px solid #1e293b; } |
| 17 | p { color: #38bdf8; } |
| 18 | `] |
| 19 | }) |
| 20 | export class SafeStorageComponent implements OnInit { |
| 21 | private platformId = inject(PLATFORM_ID); |
| 22 | storedValue: string = 'غير متوفر'; |
| 23 | |
| 24 | ngOnInit(): void { |
| 25 | // التحقق المسبق مما إذا كان الكود يعمل في متصفح المستخدم |
| 26 | if (isPlatformBrowser(this.platformId)) { |
| 27 | localStorage.setItem('theme', 'dark-mode'); |
| 28 | this.storedValue = localStorage.getItem('theme') || 'افتراضي'; |
| 29 | console.log('تم الوصول إلى التخزين المحلي للمتصفح بنجاح وأمان.'); |
| 30 | } else { |
| 31 | console.log('التطبيق يعمل حالياً على الخادم؛ تم تخطي استدعاء localStorage.'); |
| 32 | } |
| 33 | } |
| 34 | } |
| 1 | import { Injectable, PLATFORM_ID, inject } from '@angular/core'; |
| 2 | import { isPlatformBrowser } from '@angular/common'; |
| 3 | |
| 4 | @Injectable({ |
| 5 | providedIn: 'root' |
| 6 | }) |
| 7 | export class WindowDimensionsService { |
| 8 | private platformId = inject(PLATFORM_ID); |
| 9 | |
| 10 | getWindowWidth(): number { |
| 11 | if (isPlatformBrowser(this.platformId)) { |
| 12 | return window.innerWidth; |
| 13 | } |
| 14 | // إرجاع قيمة افتراضية آمنة أثناء العرض على الخادم |
| 15 | return 1200; |
| 16 | } |
| 17 | } |