Seletores :host, :host-context, ::ng-deep do Angular

Este artigo lhe dará uma compreensão aprofundada de vários seletores especiais em Angular: host, :host-context, ::ng-deep Espero que seja útil para você!

1 :host

:host significa selecionar o componente atual. [Tutoriais relacionados recomendados: "tutorial angular"]

1.1 Selecione o elemento hospedeiro

Use o seletor de pseudoclasse :host para selecionar elementos no宿主元素do componente (em relação aos elementos dentro do modelo do componente). Se não houver elementos filhos, é equivalente a selecionar o宿主元素inteiro.

Se houver o seguinte html:

 <app-detail></app-detail>

O estilo do componente app-detail (o estilo de todo o app-detail ) é o seguinte:

 :hospedar {
display: bloco embutido;
fundo: vermelho;
}

Os Elements do navegador selecionam app-detail e o estilo é o seguinte:

 [_nghost-wtd-c445] {
display: bloco embutido;
cor de fundo: vermelho;
}

Pode-se ver que :host atua diretamente no宿主元素本身

1.2 Selecione os elementos filhos do elemento host

Você pode adicionar um seletor depois de :host para selecionar子元素. Por exemplo: :host h1 localiza a tag h1 na visualização do componente

 :host h1 {
	cor:vermelho;
}

1.3 Seleção condicional de elementos hospedeiros

Só terá efeito quando o host for usado como alvo e tiver uma classe ativa.

 :host(.ativo){
	largura da borda: 3px;
}

Assim:

 <app-detail class="active"></app-detail>

2. ::ng-deep

::ng-deep pode ignorar o relacionamento hierárquico aninhado de classNames intermediários. Encontre diretamente o className que você deseja modificar.

Ao usar alguns componentes de terceiros, você precisa modificar o estilo do componente. Nesse caso, use .

2.1 Do elemento host ao elemento atual e depois a todos os elementos filhos h3 no DOM, incluindo elementos h3 usando componentes de terceiros no componente atual

 :host ::ng-deep h3 {
estilo da fonte: itálico;
}

2.2 Pesquise um tipo específico em um determinado tipo

 .card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
altura: 120px;
margem superior: -16px;
}

3 :host-context

Se uma determinada condição precisar ser atendida antes que o estilo possa ser aplicado. Ele procura classes CSS nos nós祖先do宿主元素do componente atual, até o nó raiz do documento.如果encontrado, os seguintes estilos serão aplicados aos elementos internos本组件.

3.1 Selecione elementos no elemento host do componente

 :host-contexto {
	cor:vermelho;
}

3.2 Só terá efeito quando o host for usado como alvo e tiver uma classe ativa.

No exemplo a seguir, background-color será aplicado a todos os elementos <h2>本组件内部somente se um祖先元素(o elemento host também pode ser usado) tiver a classe CSS theme-light .

 :host-context(.theme-light) h2 {
cor de fundo: #eef;
}

3.3 Você pode adicionar um seletor após :host-context para selecionar subelementos

Por exemplo: :host-context h1 localiza a tag h1 dentro da visualização do componente

 :contexto de host h1{
cor: rosa choque;
}

3.4 Pode ser usado para julgar as condições internas de um determinado estilo

 h1{
cor: rosa choque;

:host-context(.ativo) &{
cor: amarelo;
}
}