Este artículo es un artículo espejo de traducción automática, por favor haga clic aquí para saltar al artículo original.

Architect_Programmer_Code Red Agrícola»Arquitecto › Diseño front-end y web › Bastidor frontal › Mira estilo CSS de la serie Angular 9 (VII)
Vista: 9238|Respuesta: 1

[Angular] Mira estilo CSS de la serie Angular 9 (VII)

[Copiar enlace]
Publicado en 17/6/2020 16:46:59 | | | |
Componentes Dinámicos Cargados de la Serie Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Parámetros de transmisión de componentes dinámicos de la serie angular 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

La serie Angular 9 (3) se suscribe a eventos dinámicos de componentes
https://www.itsvse.com/thread-9246-1-1.html

Tuberías personalizadas Angular 9 Series (IV)
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formatea el formato de moneda de cantidad
https://www.itsvse.com/thread-9249-1-1.html

La serie angular 9 (VI) llama variables y métodos JS nativos
https://www.itsvse.com/thread-9254-1-1.html
En retrospectiva, intentamos modificar el estilo del componente de terceros introducido antes, pero no tuvo éxito.

El estilo CSS de componente de ajuste angular no tiene efecto
https://www.itsvse.com/thread-9184-1-1.html
:host representa un selector que selecciona el componente actual.
::ng-deep puede ignorar las relaciones jerárquicas anidadas del nombre intermedio de clase. Encuentra directamente el nombre de clase que quieres modificar.
Sin embargo, la documentación oficial indica que ng-deep será abandonado en futuras versiones, y se desconoce qué tipo de sintaxis se convertirá en el futuro.

La propiedad sobre el componente puede configurarse como styleUrls para establecer la hoja de estilos css del componente actual.

La hoja de estilos introducida solo afecta al elemento actual de la etiqueta y no afecta a otros componentes, lo cual es una característica importante del marco Angular.


Código CSS:

Veamos el estilo CSS generado final a través del navegador, como se muestra a continuación:



.itsvse1[_ngcontent-serverApp-c228] {
    Color de fondo: Azul;
}

[_nghost-serverApp-c228] .itsvse2 {
    Color de fondo: Verde;
}

[_nghost-serverApp-c228] .itsvse3 {
    Color de fondo: Rojo;
}

  .itsvse4 {
    Color de fondo: Aqua;
}
.itsvse1 solo genera estilos al componente actual, .itsvse2 y .itsvse3 afectan al estilo de los componentes hijos introducidos, y .itsvse3 afecta al estilo global.

ITSVse1 CSS solo puede afectar al componente actual porque todos los elementos actuales del nodo añadirán el atributo "_ngcontent-serverapp-c228", como se muestra en la figura siguiente:



(Fin)




Anterior:Encuentra el enlace de vídeo de la 17ª edición del Taller Avanzado de Operaciones de Computación en la Nube de Marco Linux
Próximo:La diferencia entre "!=" y "<>" en las sentencias SQL

Publicaciones relacionadas
 Propietario| Publicado en 26/11/2021 17:07:00 |
Tres formas de usar la encapsulación angular
https://www.itsvse.com/thread-9200-1-1.html

Renuncia:
Todo el software, materiales de programación o artículos publicados por Code Farmer Network son únicamente para fines de aprendizaje e investigación; El contenido anterior no se utilizará con fines comerciales o ilegales; de lo contrario, los usuarios asumirán todas las consecuencias. La información de este sitio proviene de Internet, y las disputas de derechos de autor no tienen nada que ver con este sitio. Debes eliminar completamente el contenido anterior de tu ordenador en un plazo de 24 horas desde la descarga. Si te gusta el programa, por favor apoya el software genuino, compra el registro y obtén mejores servicios genuinos. Si hay alguna infracción, por favor contáctanos por correo electrónico.
Mail To:help@itsvse.com