Селекторы Angular :host, :host-context, ::ng-deep

Эта статья даст вам более глубокое понимание нескольких специальных селекторов в Angular: хост, :host-context, ::ng-deep. Надеюсь, она будет вам полезна!

1 :host

:host означает выбор текущего компонента. [Рекомендуемые связанные учебные пособия: «учебник по Angular»]

1.1 Выбор хост-элемента

Используйте селектор псевдокласса :host для выбора элементов в宿主元素компонента (относительно элементов внутри шаблона компонента). Если дочерних элементов нет, это эквивалентно выбору всего宿主元素.

Если есть следующий HTML:

 <app-detail></app-detail>

Стиль компонента 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 может игнорировать вложенные иерархические отношения промежуточных имен классов. Непосредственно найдите имя класса, которое вы хотите изменить.

При использовании некоторых сторонних компонентов необходимо изменить стиль компонента. В этом случае используйте .

2.1 От главного элемента к текущему элементу, а затем ко всем дочерним элементам h3 в DOM, включая элементы h3 с использованием сторонних компонентов в текущем компоненте.

 :host ::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 .

 :host-context(.theme-light) h2 {
цвет фона: #eef;
}

3.3 Вы можете добавить селектор после :host-context для выбора подэлементов.

Например: :host-context h1 находит тег h1 внутри представления компонента.

 :хост-контекст h1{
цвет: ярко-розовый;
}

3.4 Может использоваться для оценки внутреннего состояния определенного стиля.

 h1{
цвет: ярко-розовый;

:host-context(.active) &{
цвет: желтый;
}
}