Eu sou novo no Angular 4, então alguém poderia explicar como e onde usar ::ng-deep
no Angular 4?
Na verdade, quero substituir algumas das propriedades CSS dos componentes filhos dos componentes pais. Além disso, é compatível com o IE11?
Eu sou novo no Angular 4, então alguém poderia explicar como e onde usar ::ng-deep
no Angular 4?
Na verdade, quero substituir algumas das propriedades CSS dos componentes filhos dos componentes pais. Além disso, é compatível com o IE11?
Respostas:
Normalmente, o /deep/ “shadow-piercing”
combinador pode ser usado para forçar a redução de um estilo child components
. Este seletor tinha um alias >>> e agora tem outro chamado :: ng-deep.
desde /deep/ combinator
que foi descontinuado, é recomendado usar::ng-deep
Por exemplo:
<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>
e css
.overview {
::ng-deep {
p {
&:last-child {
margin-bottom: 0;
}
}
}
}
será aplicado a componentes filhos
::ng-deep
, >>>
e /deep/
desabilita o encapsulamento de visualização para regras CSS específicas, em outras palavras, dá acesso a elementos DOM, que não estão no HTML do seu componente. Por exemplo, se você estiver usando Angular Material (ou qualquer outra biblioteca de terceiros como esta), alguns elementos gerados estão fora da área do seu componente (como a caixa de diálogo ) e você não pode acessar esses elementos diretamente ou usando um CSS regular caminho. Se quiser alterar os estilos desses elementos, você pode usar uma dessas três coisas, por exemplo:
::ng-deep .mat-dialog {
/* styles here */
}
Por enquanto, a equipe Angular recomenda fazer manipulações "profundas" apenas com EMULADO encapsulamento de visualização .
manipulações "profundas" também estão obsoletas , MAS ainda funcionam por enquanto, porque o Angular oferece suporte de pré-processamento (não se apresse em recusar ::ng-deep
hoje, dê uma olhada nas práticas de suspensão primeiro).
De qualquer forma, antes de seguir este caminho, recomendo que você dê uma olhada em desabilitar a abordagem de encapsulamento de visão (o que também não é ideal, pois permite que seus estilos vazem para outros componentes), mas em alguns casos, é uma maneira melhor. Se você decidiu desabilitar o encapsulamento de visão, é altamente recomendável usar classes específicas para evitar a interseção de regras CSS e, finalmente, evitar uma bagunça em suas folhas de estilo. É realmente fácil desativar diretamente no .ts
arquivo do componente :
@Component({
selector: '',
template: '',
styles: [''],
encapsulation: ViewEncapsulation.None // Use to disable CSS Encapsulation for this component
})
Você pode encontrar mais informações sobre o encapsulamento de visualizações neste artigo.
ViewEncapsulation.None
! Isso causará muitos danos ao possibilitar que esses estilos vazem para outros componentes.
Eu enfatizaria a importância de limitar o ::ng-deep
a apenas filhos de um componente, exigindo que o pai seja uma classe css encapsulada.
Para que isso funcione, é importante usar ::ng-deep
depois do pai, não antes, caso contrário, ele se aplicaria a todas as classes com o mesmo nome no momento em que o componente é carregado.
CSS do componente:
.my-component ::ng-deep .mat-checkbox-layout {
background-color: aqua;
}
Modelo de componente:
<h1 class="my-component">
<mat-checkbox ....></mat-checkbox>
</h1>
Css resultante (gerado angular):
.my-component[_ngcontent-c1] .mat-checkbox-layout {
background-color: aqua;
}
EDITAR:
Você pode obter o mesmo comportamento usando a :host
palavra - chave em vez de criar uma nova classe css.
:host ::ng-deep .mat-checkbox-layout
my-component ::ng-deep...
salvou meu dia. Passei o dia todo tentando aplicar um estilo ao meu componente com ng-deep e estava substituindo todos os meus componentes, de todo o meu aplicativo.
:host
palavra-chave - adicionou uma nota à resposta para maior clareza.
Certifique-se de não perder a explicação :host-context
que está diretamente acima ::ng-deep
no guia angular: https://angular.io/guide/component-styles . Eu perdi isso até agora e gostaria de ter visto antes.
::ng-deep
geralmente é necessário quando você não escreveu o componente e não tem acesso ao seu código-fonte, mas :host-context
pode ser uma opção muito útil quando você o faz.
Por exemplo, tenho um <h1>
cabeçalho preto dentro de um componente que projetei e quero poder alterá-lo para branco quando for exibido em um fundo de tema escuro.
Se eu não tivesse acesso à fonte, posso ter que fazer isso no css para o pai:
.theme-dark widget-box ::ng-deep h1 { color: white; }
Mas em vez disso, :host-context
você pode fazer isso dentro do componente.
h1
{
color: black; // default color
:host-context(.theme-dark) &
{
color: white; // color for dark-theme
}
// OR set an attribute 'outside' with [attr.theme]="'dark'"
:host-context([theme='dark']) &
{
color: white; // color for dark-theme
}
}
Isso procurará em qualquer lugar na cadeia de componentes .theme-dark
e aplicará o css ao h1, se encontrado. Esta é uma boa alternativa para confiar demais no ::ng-deep
que, embora muitas vezes necessário, é um tanto antipadrão.
Neste caso, o &
é substituído peloh1
(é assim que funciona o sass / scss) para que você possa definir o seu css 'normal' e temático / alternativo um ao lado do outro, o que é muito útil.
Tenha cuidado para obter o número correto de :
. Pois ::ng-deep
existem dois e :host-context
apenas um.
:host(.theme-dark)
se não quiser herdar theme-dark
de nenhum componente pai. Isso dependerá inteiramente do design de css do seu site. Além disso, os atributos podem ser muito úteis e podem ser combinados de maneiras sofisticadas apenas no css:host([theme='dark']:not([dayofweek='tuesday'))
.theme-light
classe que, por sua vez, está aninhada dentro de um contêiner com .theme-dark
ele ainda pegará o theme-dark
e aplicará o css. Mas esta é uma ótima solução para classes do tipo 'modernizr', ou se você tiver um tema definido globalmente e apenas uma vez.
Apenas uma atualização:
Você deve usar em ::ng-deep
vez de /deep/
que parece estar obsoleto.
Por documentação:
O combinador descendente que perfura a sombra está obsoleto e o suporte está sendo removido dos principais navegadores e ferramentas. Como tal, planejamos deixar o suporte no Angular (para todos os 3 de / deep /, >>> e :: ng-deep). Até então, :: ng-deep deve ser preferido para uma compatibilidade mais ampla com as ferramentas.
Você pode encontrar aqui
Use :: ng-deep com cuidado. Usei-o em todo o meu aplicativo para definir a cor da barra de ferramentas do material design para cores diferentes em todo o meu aplicativo apenas para descobrir que quando o aplicativo estava testando as cores da barra de ferramentas pisavam umas nas outras. Venha descobrir que é porque esses estilos se tornam globais, consulte este artigo. Aqui está uma solução de código funcional que não penetra em outros componentes.
<mat-toolbar #subbar>
...
</mat-toolbar>
export class BypartSubBarComponent implements AfterViewInit {
@ViewChild('subbar', { static: false }) subbar: MatToolbar;
constructor(
private renderer: Renderer2) { }
ngAfterViewInit() {
this.renderer.setStyle(
this.subbar._elementRef.nativeElement, 'backgroundColor', 'red');
}
}
/deep/
e::ng-deep
estão obsoletos, sugiro que você leia esta resposta stackoverflow.com/a/49308475/2275011 e comentários para obter mais detalhes e soluções.