Angular's :host، :host-context، ::ng-deep محددات

ستمنحك هذه المقالة فهمًا متعمقًا للعديد من المحددات الخاصة في Angular: host، :host-context، ::ng-deep.

1 :host

:host يعني تحديد المكون الحالي. [البرامج التعليمية الموصى بها: "البرنامج التعليمي الزاوي"]

1.1 حدد العنصر المضيف

استخدم مُحدد الفئة الزائفة :host لتحديد العناصر الموجودة في宿主元素المكون (بالنسبة للعناصر الموجودة داخل قالب المكون)، إذا لم تكن هناك عناصر فرعية، فهذا يعادل تحديد宿主元素بأكمله.

إذا كان هناك HTML التالي:

 <تفاصيل التطبيق></تفاصيل التطبيق>

نمط app-detail المكون (نمط app-detail بالكامل) هو كما يلي:

 :يستضيف {
العرض: كتلة مضمنة؛
الخلفية: أحمر؛
}

تحدد Elements المتصفح عنصر app-detail ، ويكون النمط كما يلي:

 [_nghost-wtd-c445] {
العرض: كتلة مضمنة؛
لون الخلفية: أحمر؛
}

يمكن ملاحظة أن :host يعمل مباشرة على宿主元素本身

1.2 حدد العناصر الفرعية للعنصر المضيف

يمكنك إضافة محدد بعد :host لتحديد子元素. على سبيل المثال: :host h1 يحدد موقع علامة h1 داخل عرض المكون

 :المضيف h1 {
	اللون: أحمر؛
}

1.3 الاختيار المشروط للعناصر المضيفة

ولن يسري مفعوله إلا عندما يتم استخدام المضيف كهدف ولديه فئة نشطة.

 :المضيف(.نشط){
	عرض الحدود: 3 بكسل؛
}

مثله:

 <app-detail class="active"></app-detail>

2. ::ng-deep

::ng-deep يمكنه تجاهل العلاقة الهرمية المتداخلة لأسماء الفئات المتوسطة. ابحث مباشرة عن className الذي تريد تعديله.

عند استخدام بعض مكونات الطرف الثالث، تحتاج إلى تعديل نمط المكون. في هذه الحالة، استخدم .

2.1 من العنصر المضيف إلى العنصر الحالي ثم إلى جميع عناصر h3 التابعة في DOM، بما في ذلك عناصر h3 التي تستخدم مكونات خارجية في المكون الحالي

 :المضيف ::ng-deep h3 {
نمط الخط: مائل؛
}

2.2 البحث عن نوع معين ضمن نوع معين

 .card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
الارتفاع: 120 بكسل؛
الهامش العلوي: -16 بكسل؛
}

3 :host-context

إذا كانت هناك حاجة إلى استيفاء شرط معين قبل تطبيق النمط. فهو يبحث عن فئات CSS في العقد祖先宿主元素للمكون الحالي، حتى العقدة الجذرية للمستند.如果وجدت، سيتم تطبيق الأنماط التالية على العناصر الداخلية本组件.

3.1 حدد العناصر في عنصر مضيف المكون

 :سياق المضيف {
	اللون: أحمر؛
}

3.2 لن يصبح ساري المفعول إلا عندما يتم استخدام المضيف كهدف ولديه فئة نشطة.

في المثال التالي، سيتم تطبيق نمط background-color على جميع عناصر <h2>本组件内部فقط إذا كان祖先元素(يمكن أيضًا استخدام العنصر المضيف) يحتوي على فئة CSS theme-light .

 :سياق المضيف (.theme-light) h2 {
لون الخلفية: #eef؛
}

3.3 يمكنك إضافة محدد بعد :host-context لتحديد العناصر الفرعية

على سبيل المثال: :host-context h1 يحدد موقع علامة h1 داخل عرض المكون

 :سياق المضيف h1{
اللون: وردي ساخن؛
}

3.4 يمكن استخدامه للحكم على الظروف الداخلية لأسلوب معين

 ح1{
اللون: وردي ساخن؛

:سياق المضيف(.active) &{
اللون: أصفر.
}
}