أوضاع تغليف العرض
قارنوا بين Emulated وNone وShadowDom
أوضاع تغليف العرض درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
ما هو عزل العرض؟
يتحكم عزل العرض في كيفية عزل تنسيقات المكوّن عن بقية الصفحة. يوفر Angular ثلاثة أوضاع عبر الخاصية encapsulation.
تعيين الوضع
عيّنوا الوضع باستخدام تعداد ViewEncapsulation في المُزيّن @Component.
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-card",
encapsulation: ViewEncapsulation.Emulated
})
export class CardComponent {}Emulated (الافتراضي)
الوضع Emulated هو الوضع الافتراضي. يحاكي Angular التنسيقات المحصورة بإضافة سمات فريدة إلى العناصر والمحدِّدات، من دون استخدام Shadow DOM الأصلي.
@Component({
encapsulation: ViewEncapsulation.Emulated
})كيفية عمل Emulated
يعيد الوضع Emulated كتابة المحدِّدات باستخدام سمات مُولّدة، مما يوفر عزلًا يعمل في جميع المتصفحات من دون اشتراط دعم Shadow DOM.
/* you write */
.title { color: blue; }
/* angular emits */
.title[_ngcontent-xyz] { color: blue; }None
يعطّل None العزل بالكامل. فتصبح تنسيقات المكوّن عامة، ويمكنها التأثير في أي عنصر في الصفحة.
@Component({
encapsulation: ViewEncapsulation.None,
styles: [".title { color: red; }"]
})
// .title now applies app-wideمتى تستخدمون None
استخدموا None بحذر، مثلًا لتعريف قواعد سمة مشتركة من مكوّن واحد. انتبهوا إلى أن التنسيقات قد تتعارض على مستوى التطبيق بأكمله.
ShadowDom
يستخدم ShadowDom تقنية Shadow DOM الأصلية في المتصفح لعزل ترميز المكوّن وتنسيقاته عزلًا حقيقيًا.
@Component({
selector: "app-widget",
encapsulation: ViewEncapsulation.ShadowDom
})
export class WidgetComponent {}كيف يختلف ShadowDom
مع ShadowDom، يُعرض المكوّن داخل جذر shadow حقيقي. لا تنفذ التنسيقات العامة إلى داخله، ولا تتسرب تنسيقات المكوّن إلى خارجه، مما يوفر أقوى عزل.
مقارنة تسرّب التنسيقات
يمنع Emulated التسرّب إلى الخارج، لكن لا تزال التنسيقات العامة قادرة على استهداف العناصر؛ أما None فلا يوفر أي عزل؛ بينما يحجب ShadowDom الاتجاهين بالكامل.
اختيار الوضع
التزموا بـ Emulated في معظم الحالات. استخدموا ShadowDom للوحدات المعزولة بالكامل، واستخدموا None فقط للتنسيقات العامة المقصودة.
العزل والتنسيقات العامة
تذكّروا أن ملف styles.css العام يُطبّق دائمًا بغض النظر عن الوضع، باستثناء ما يوجد داخل مكوّن ShadowDom، حيث لا تصل إليه التنسيقات العامة.
تحقق سريع
اختبروا مدى فهمكم لأوضاع عزل العرض.
مراجعة
يوفر Angular ثلاثة أوضاع للعزل: Emulated (الافتراضي، عزل مُحاكى)، وNone (تنسيقات عامة)، وShadowDom (عزل أصلي). يناسب Emulated معظم الحالات، بينما يوفر ShadowDom أقوى عزل.
الأسئلة الشائعة
هل درس «أوضاع تغليف العرض» مجاني؟
نعم — نص درس «أوضاع تغليف العرض» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «أوضاع تغليف العرض»؟
قارنوا بين Emulated وNone وShadowDom تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «أوضاع تغليف العرض»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.