Come e dove usare :: ng-deep?

Sono nuovo in Angular 4, quindi qualcuno potrebbe spiegare come e dove usarlo ::ng-deepin Angular 4?

In realtà voglio sovrascrivere alcune delle proprietà CSS dei componenti figlio dai componenti padre. Inoltre è supportato su IE11?

Di solito il /deep/ “shadow-piercing”combinatore può essere utilizzato per forzare uno stile a child components. Questo selettore aveva un alias >>> e ora ne ha un altro chiamato :: ng-deep.

poiché /deep/ combinatorè stato deprecato, si consiglia di utilizzare::ng-deep

Per esempio:

<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;
            }
        }
    }
}

verrà applicato ai componenti figlio

UTILIZZO

::ng-deep, >>>E /deep/vista disabilitare l'incapsulamento di regole CSS specifiche, in altre parole, consente di accedere a elementi DOM, che non sono in HTML del componente. Ad esempio, se stai utilizzando Angular Material (o qualsiasi altra libreria di terze parti come questa), alcuni elementi generati sono al di fuori dell'area del tuo componente (come la finestra di dialogo ) e non puoi accedere a quegli elementi direttamente o utilizzando un normale CSS modo. Se vuoi cambiare gli stili di quegli elementi, puoi usare una di queste tre cose, ad esempio:

::ng-deep .mat-dialog {
  /* styles here */
}

Per ora il team di Angular consiglia di fare manipolazioni "profonde" solo con l' incapsulamento della vista EMULATO .

DEPRECAZIONE

anche le manipolazioni "profonde" sono in realtà deprecate , MA per ora funziona ancora, perché Angular supporta la pre-elaborazione (non affrettarti a rifiutare ::ng-deepoggi, dai un'occhiata a pratiche di deprecazione ).

Ad ogni modo, prima di seguire questo modo, ti consiglio di dare un'occhiata alla disabilitazione dell'approccio all'incapsulamento della vista (che non è nemmeno l'ideale, consente ai tuoi stili di trapelare in altri componenti), ma in alcuni casi è un modo migliore. Se hai deciso di disabilitare l'incapsulamento della vista, ti consigliamo vivamente di utilizzare classi specifiche per evitare l'intersezione delle regole CSS e, infine, evitare confusione nei fogli di stile. È davvero facile disabilitare direttamente nel .tsfile del componente :

@Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

Puoi trovare maggiori informazioni sull'incapsulamento della vista in questo articolo.

Vorrei sottolineare l'importanza di limitare gli ::ng-deepunici figli di un componente richiedendo che il genitore sia una classe CSS incapsulata.

Affinché funzioni è importante usare il ::ng-deepdopo il genitore, non prima altrimenti si applicherebbe a tutte le classi con lo stesso nome nel momento in cui il componente viene caricato.

Componente css:

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

Modello componente:

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

CSS risultante (generato angolare):

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}

MODIFICARE:

È possibile ottenere lo stesso comportamento utilizzando la :hostparola chiave invece di creare una nuova classe CSS.

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

Assicurati di non perdere la spiegazione di :host-contextcui è direttamente sopra ::ng-deepnella guida angolare: https://angular.io/guide/component-styles . Mi è mancato fino ad ora e vorrei averlo visto prima.

::ng-deepè spesso necessario quando non hai scritto il componente e non hai accesso ai suoi sorgenti, ma :host-contextpuò essere un'opzione molto utile quando lo fai.

Ad esempio, ho <h1>un'intestazione nera all'interno di un componente che ho progettato e voglio la possibilità di cambiarlo in bianco quando viene visualizzato su uno sfondo scuro a tema.

Se non ho avuto accesso alla fonte potrei doverlo fare nel css per il genitore:

.theme-dark widget-box ::ng-deep h1 { color: white; }

Ma invece :host-contextpuoi farlo all'interno del 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
     }
 }

Questo cercherà ovunque nella catena dei componenti .theme-darke applicherà il css a h1 se trovato. Questa è una buona alternativa al fare troppo affidamento su ciò ::ng-deepche, sebbene spesso necessario, è in qualche modo un anti-pattern.

In questo caso il &viene sostituito dalh1 (è così che funziona sass / scss) in modo da poter definire il tuo css "normale" e a tema / alternativo uno accanto all'altro, il che è molto utile.

Fare attenzione a ottenere il numero corretto di file :. Perché ::ng-deepce ne sono due e per :host-contextuno solo.

Solo un aggiornamento:

Dovresti usare ::ng-deepinvece di quello /deep/che sembra essere deprecato.

Per documentazione:

Il combinatore discendente che penetra nell'ombra è deprecato e il supporto è stato rimosso dai principali browser e strumenti. Pertanto, abbiamo in programma di eliminare il supporto in Angular (per tutti e 3 i di / deep /, >>> e :: ng-deep). Fino ad allora :: ng-deep dovrebbe essere preferito per una più ampia compatibilità con gli strumenti.

Puoi trovarlo qui

Usa :: ng-deep con cautela. L'ho usato in tutta la mia app per impostare il colore della barra degli strumenti del material design su colori diversi in tutta la mia app solo per scoprire che quando l'app era in fase di test i colori della barra degli strumenti si sovrappongono. Vieni a scoprire che è perché questi stili diventano globali, vedi questo articolo Ecco una soluzione di codice funzionante che non si diffonde in altri componenti.

<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');
  }

}