Como e onde usar :: ng-deep?

Eu sou novo no Angular 4, então alguém poderia explicar como e onde usar ::ng-deepno Angular 4?

Na verdade, quero substituir algumas das propriedades CSS dos componentes filhos dos componentes pais. Além disso, é compatível com o IE11?

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/ combinatorque 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

USO

::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 .

DEPRECAÇÃ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-deephoje, 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 .tsarquivo 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.

Eu enfatizaria a importância de limitar o ::ng-deepa apenas filhos de um componente, exigindo que o pai seja uma classe css encapsulada.

Para que isso funcione, é importante usar ::ng-deepdepois 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 :hostpalavra - chave em vez de criar uma nova classe css.

:host ::ng-deep .mat-checkbox-layout

Certifique-se de não perder a explicação :host-contextque está diretamente acima ::ng-deepno guia angular: https://angular.io/guide/component-styles . Eu perdi isso até agora e gostaria de ter visto antes.

::ng-deepgeralmente é necessário quando você não escreveu o componente e não tem acesso ao seu código-fonte, mas :host-contextpode 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-contextvocê 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-darke aplicará o css ao h1, se encontrado. Esta é uma boa alternativa para confiar demais no ::ng-deepque, 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-deepexistem dois e :host-contextapenas um.

Apenas uma atualização:

Você deve usar em ::ng-deepvez 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');
  }

}