Selectores :host, :host-context, ::ng-deep de Angular

Este artículo le brindará una comprensión profunda de varios selectores especiales en Angular: host, :host-context, ::ng-deep. ¡Espero que le resulte útil!

1. :host

:host significa seleccionar el componente actual. [Tutoriales relacionados recomendados: "tutorial angular"]

1.1 Seleccionar elemento anfitrión

Utilice el selector de pseudoclase :host para seleccionar elementos en el宿主元素del componente (en relación con los elementos dentro de la plantilla del componente, si no hay elementos secundarios, es equivalente a seleccionar el宿主元素completo).

Si existe el siguiente html:

 <detalle-aplicación></detalle-aplicación>

El estilo del componente app-detail (el estilo de todo el app-detail ) es el siguiente:

 :anfitrión {
pantalla: bloque en línea;
fondo: rojo;
}

Los Elements del navegador seleccionan app-detail y el Estilo es el siguiente:

 [_nghost-wtd-c445] {
pantalla: bloque en línea;
color de fondo: rojo;
}

Se puede ver que :host actúa directamente sobre宿主元素本身

1.2 Seleccionar elementos secundarios del elemento anfitrión

Puede agregar un selector después de :host para seleccionar子元素. Por ejemplo: :host h1 ubica la etiqueta h1 dentro de la vista del componente

 :anfitrión h1 {
	color: rojo;
}

1.3 Selección condicional de elementos anfitriones.

Solo tendrá efecto cuando el anfitrión se utilice como objetivo y tenga una clase activa.

 :host(.activo){
	ancho de borde: 3px;
}

Como esto:

 <detalle de aplicación clase="activo"></detalle de aplicación>

2. ::ng-deep

::ng-deep puede ignorar la relación jerárquica anidada de nombres de clases intermedios. Busque directamente el nombre de clase que desea modificar.

Cuando utilice algunos componentes de terceros, deberá modificar el estilo del componente. En este caso, utilice .

2.1 Del elemento anfitrión al elemento actual y luego a todos los elementos h3 secundarios en el DOM, incluidos los elementos h3 que utilizan componentes de terceros en el componente actual

 :host ::ng-profundo h3 {
estilo de fuente: cursiva;
}

2.2 Buscar un tipo específico bajo un tipo determinado

 .card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
altura: 120 píxeles;
margen superior: -16px;
}

3. :host-context

Si es necesario cumplir una determinada condición antes de poder aplicar el estilo. Busca clases CSS en los nodos祖先del宿主元素del componente actual, hasta el nodo raíz del documento.如果se encuentran, los siguientes estilos se aplicarán a los elementos internos本组件.

3.1 Seleccionar elementos en el elemento anfitrión del componente

 : contexto-host {
	color: rojo;
}

3.2 Solo tendrá efecto cuando el anfitrión se utilice como objetivo y tenga una clase activa.

En el siguiente ejemplo, background-color se aplicará a todos los elementos <h2>本组件内部solo si un祖先元素(también se puede usar el elemento anfitrión) tiene la clase CSS theme-light .

 : contexto-host (.tema-luz) h2 {
color de fondo: #eef;
}

3.3 Puede agregar un selector después de :host-context para seleccionar subelementos

Por ejemplo: :host-context h1 ubica la etiqueta h1 dentro de la vista del componente

 : contexto de host h1 {
color: rosa fuerte;
}

3.4 Se puede utilizar para juzgar las condiciones internas de un determinado estilo.

 h1{
color: rosa intenso;

: contexto-host(.activo) &{
color: amarillo;
}
}