| استراتيجية العزل | طريقة العمل والآلية الداخلية | التأثير على التطبيق والملفات |
|---|---|---|
| Emulated (الافتراضية) | يقوم أنجولر بإنشاء سمات فريدة وإضافتها لعناصر الـ HTML وتقييد محددات الـ CSS بها | تطبق التنسيقات على المكون الحالي فقط دون التأثير على المكونات الأخرى |
| ShadowDom | يعتمد كلياً على تقنية متصفح الويب الأصلية Shadow DOM لعزل الواجهة بشكل تام | يوفر عزلاً حققيقياً وقوياً جداً ولكنه قد يتسبب في بعض المشاكل مع مكتبات التنسيق الخارجية |
| None | يلغي العزل تماماً ويحول كود الـ CSS الخاص بالمكون إلى تنسيقات عامة | يؤثر على صفحة الويب بأكملها ويُستخدم بحذر شديد |
متابعةً للمسار التعليمي لفصل المكونات المستقلة الموضح في الصورة المرفقة سابقاً، نصل إلى الدرس السادس والذي يمثل النقطة الفاصلة في هيكلية التطبيق: كيفية تشغيل تطبيق أنجولر بالكامل دون استخدام وحدات (NgModules). في الإصدارات الحديثة Angular 22.1، تم الاستغناء نهائياً عن ملف app.module.ts التقليدي، وأصبح الملف الجذري main.ts يعتمد على دالة بسيطة ومباشرة تسمى bootstrapApplication لتشغيل أول مكون مستقل في التطبيق.
بشكل افتراضي، لا تحتاج لفعل أي شيء معقد؛ فأنجولر يقوم تلقائياً بإضافة وسم فريد (مثل _ngcontent-abc-c12) لكل عنصر في المكون، ويعدل قواعد الـ CSS لترتبط بهذا الوسم حصرياً. هذا يتيح لك استخدام نفس أسماء الكلاسات (مثل .card أو .btn) في مكونات مختلفة دون خوف من تداخل التصاميم.
إذا أردت تغيير طريقة العزل الافتراضية، يمكنك استخدام خاصية encapsulation داخل المزخرف @Component وتمرير الاستراتيجية المناسبة لاحتياجات مشروعك.
هذا هو النمط القياسي والمفضل في Angular 22.1. الأنماط هنا لا تؤثر إلا على هذا المكون فقط:
| 1 | import { Component } from '@angular/core'; |
| 2 | |
| 3 | @Component({ |
| 4 | selector: 'app-user-badge', |
| 5 | standalone: true, |
| 6 | template: ` |
| 7 | <div class="badge-box"> |
| 8 | <span>مستخدم مميز</span> |
| 9 | </div> |
| 10 | `, |
| 11 | // التنسيق هنا معزول ولن يتسرب للخارج |
| 12 | styles: ` |
| 13 | .badge-box { |
| 14 | background-color: #e3f2fd; |
| 15 | color: #0d47a1; |
| 16 | padding: 8px 16px; |
| 17 | border-radius: 20px; |
| 18 | display: inline-block; |
| 19 | } |
| 20 | ` |
| 21 | }) |
| 22 | export class UserBadgeComponent {} |
اذا كنت تريد أن تؤثر تنسيقات هذا المكون على باقي التطبيق (تنسيقات عامة):
| 1 | import { Component, ViewEncapsulation } from '@angular/core'; |
| 2 | |
| 3 | @Component({ |
| 4 | selector: 'app-global-styles-injector', |
| 5 | standalone: true, |
| 6 | template: `<p>هذا النص سيتاثر بالتنسيق العام.</p>`, |
| 7 | styles: ` |
| 8 | p { |
| 9 | font-size: 18px; |
| 10 | color: #d32f2f; |
| 11 | } |
| 12 | `, |
| 13 | // إلغاء العزل لتصبح الأنماط عامة |
| 14 | encapsulation: ViewEncapsulation.None |
| 15 | }) |
| 16 | export class GlobalStylesInjectorComponent {} |