Mira CSS estilo Angular série 9 (VII)

Pequeno · Publicado em 17/06/2020 16:46:59

Componentes Carregados Dinamicamente da Série Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Parâmetros de transmissão de componentes dinâmicos da série Angular 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

A série Angular 9 (3) subscreve eventos dinâmicos de componentes
https://www.itsvse.com/thread-9246-1-1.html

Tubulações personalizadas da Série Angular 9 (IV)
https://www.itsvse.com/thread-9248-1-1.html

A Série Angular 9 (V) formata o formato de moeda de quantidade
https://www.itsvse.com/thread-9249-1-1.html

A série angular 9 (VI) chama variáveis e métodos JS nativos
https://www.itsvse.com/thread-9254-1-1.html

Em retrospecto, tentamos modificar o estilo do componente de terceiros introduzido antes, mas não teve sucesso.

O estilo CSS de componente de configuração angular não tem efeito
https://www.itsvse.com/thread-9184-1-1.html

:host representa um seletor que seleciona o componente atual.
::ng-deep pode ignorar as relações hierarquicas aninhadas do intermediário className. Encontre diretamente o nome da classe que você quer modificar.
No entanto, a documentação oficial diz que o ng-deep será abandonado em versões futuras, e não se sabe que tipo de sintaxe ele se tornará no futuro.

A propriedade no topo do componente pode ser definida como styleUrls para definir a folha de estilos css do componente atual.

A folha de estilo introduzida afeta apenas o elemento da tag atual e não afeta outros componentes, o que é uma característica importante do framework Angular.

Código CSS:

O login está visível.

Vamos analisar o estilo CSS gerado pelo navegador, como mostrado abaixo:

.itsvse1[_ngcontent-serverApp-c228] {
Cor de Fundo: Azul;
}

[_nghost-serverApp-c228] .itsvse2 {
Cor de fundo: verde;
}

[_nghost-serverApp-c228] .itsvse3 {
Cor de Fundo: Vermelho;
}

.itsvse4 {
Cor de fundo: Aqua;
}

.itsvse1 apenas estiliza o componente atual, .itsvse2 e .itsvse3 afetam o estilo dos componentes filhos introduzidos, e .itsvse3 afeta o estilo global.

O CSS ITSVSE1 só pode afetar o componente atual porque todos os elementos atuais do nó adicionarão o atributo "_ngcontent-serverapp-c228", como mostrado na figura abaixo:

(Fim)

Pequeno · Publicado em 26/11/2021 17:07:00

Três maneiras de usar encapsulamento angular
https://www.itsvse.com/thread-9200-1-1.html

O login está visível.

[Angular] Mira CSS estilo Angular série 9 (VII)

Posts Relacionados

Seções visualizadas