| وجه المقارنة الهندسية | الوصول المباشر (ElementRef) | خدمة التجريد الآمن (Renderer2) |
|---|---|---|
| مستوى الأمان والاستقرار | أقل أماناً عند العمل في بيئات الخادم (SSR) لأنه يتعامل مع كائن DOM الحقيقي | عالي الأمان ويقوم بتجريد العمليات لتتوافق مع مختلف بيئات التشغيل |
| القدرة على تعديل الخصائص | يمنح وصولاً مباشراً وكاملاً لخصائص العنصر عبر nativeElement | يوفر دوال مخصصة ونظيفة (مثل setStyle و setAttribute) |
| الأداء والتوافق المعماري | قد يتسبب في مشاكل إذا لم يتم التعامل بحذر مع شجرة عناصر الصفحة | موصى به معمارياً من فريق أنجولر لتفادي أخطاء الأمان وتحديثات الواجهة |
التعامل مع عناصر DOM مباشرة (ElementRef و Renderer2). عندما تحتاج لتعديل عناصر واجهة المستخدم برمجياً داخل التوجيهات أو المكونات، فإن التلاعب المباشر بـ DOM عبر ElementRef قد يكون خطراً أمنياً أو غير مدعوم في البيئات الخالية من متصفح (مثل Server-Side Rendering). هنا يأتي دور Renderer2 كطبقة تجريد آمنة وموصى بها من أحدث إصدارات أنجولر لتنفيذ التعديلات باحترافية وأمان تام.
استخدام elementRef.nativeElement.style مباشرة يربط كودك بمتصفح الويب حصرياً، مما قد يكسر التطبيق عند تفعيله على الخادم (SSR) أو في تطبيقات الجوال.
يتم حقن Renderer2 بجانب ElementRef داخل التوجيه، بحيث يُستخدم ElementRef لتحديد العنصر المستهدف، بينما تُستخدم أوامر Renderer2 لتطبيق التعديلات البرمجية (مثل إضافة كلاس، تغيير لون، أو تعديل سمة) بأمان تام.
| 1 | import { Directive, ElementRef, HostListener, Renderer2, inject } from '@angular/core'; |
| 2 | |
| 3 | @Directive({ |
| 4 | selector: '[appSecureDom]', |
| 5 | standalone: true |
| 6 | }) |
| 7 | export class SecureDomDirective { |
| 8 | private el = inject(ElementRef); |
| 9 | private renderer = inject(Renderer2); |
| 10 | |
| 11 | @HostListener('click') onClick() { |
| 12 | // استخدام Renderer2 لتغيير لون الخلفية بأمان تام |
| 13 | this.renderer.setStyle( |
| 14 | this.el.nativeElement, |
| 15 | 'background-color', |
| 16 | '#0ea5e9' |
| 17 | ); |
| 18 | |
| 19 | // إضافة فئة CSS برمجياً عبر Renderer2 |
| 20 | this.renderer.addClass(this.el.nativeElement, 'active-dom-element'); |
| 21 | } |
| 22 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { SecureDomDirective } from './secure-dom.directive'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-renderer-demo', |
| 6 | standalone: true, |
| 7 | imports: [SecureDomDirective], |
| 8 | template: ` |
| 9 | <div class="renderer-container"> |
| 10 | <h3>التعامل الآمن مع DOM عبر Renderer2</h3> |
| 11 | |
| 12 | <!-- عنصر يستدعي التوجيه الآمن --> |
| 13 | <div appSecureDom class="target-box"> |
| 14 | انقر فوق هذا الصندوق لتفعيل التعديل الآمن عبر Renderer2! |
| 15 | </div> |
| 16 | </div> |
| 17 | `, |
| 18 | styles: [` |
| 19 | .renderer-container { background: #090d16; color: #fff; padding: 20px; border-radius: 10px; } |
| 20 | .target-box { background: #1e293b; color: #38bdf8; padding: 16px; border-radius: 8px; cursor: pointer; font-weight: bold; border: 1px solid #334155; transition: all 0.3s; } |
| 21 | .active-dom-element { border-color: #10b981; color: #ffffff; } |
| 22 | `] |
| 23 | }) |
| 24 | export class RendererDemoComponent {} |