מה זה ng-deep ו-host ב-css?

הם נפוצים ושימושיים באנגולר, בקצרה על כל אחד מהם:

• ng-deep – מבטל את הקשר לזיהוי של הקומפוננטה
• host – מקבל את הזיהוי של הקומפוננטה המארחת

וכך זה נראה:

מבנה הפרויקט

מאסטר מכיל את האבא, אבא מכיל את הילד.

בכל אחד מהם יש תגית P ואנחנו משנים את ה-CSS של האבא.

::ng-deep {
    p {
        background-color: lightgreen;
    }
}

:host ::ng-deep {
    p {
        border: 1px solid blue;
    }
}

התוצאה היא:

למה זה קרה?

כשנתנו ל-P רקע ירוק , עשינו את זה מיד אחרי ng-deep , זה ניתק את ה-class מהקוד זיהוי של הקומפוננטה והפך אותו ל-class רגיל בדיוק כמו שהיינו כותבים ב-html רגיל ולא בפרויקט אנגולר.

זה אומר שהוא הפך להיות גלובאלי וישפיע על כל הקומפוננטות שיש בדף (זה לא ממש טוב לנו ברוב המקרים).

כשהוספנו את המסגרת הכחולה, ע"י זה שהוספנו host לפני, משכנו את הזיהוי של האבא כסוג של פילטר או נקודת התחלה שממנה ופנימה כל הרכיבים שהם P יקבלו את המסגרת.

כך זה נראה בפועל:

[_nghost-gmr-c2] p

כך אנחנו יכולים לשלוט טוב יותר במי יושפע, ולא לגרום לכל הדף לקבל עיצוב שלא תמיד רצוי.

פוסטים קשורים:

אנגולר Rxjs – BehaviorSubject in Service file שימוש יעיל ב async pipe – אנגולר