Wie und wo :: ng-deep verwenden?

Ich bin neu in Angular 4, kann jemand bitte erklären, wie und wo ::ng-deepin Angular 4 zu verwenden ist?

Eigentlich möchte ich einige der CSS-Eigenschaften der untergeordneten Komponenten von den übergeordneten Komponenten überschreiben. Außerdem wird es auf IE11 unterstützt?

Normalerweise /deep/ “shadow-piercing”kann ein Kombinator verwendet werden, um einen Stil auf zu erzwingen child components. Dieser Selektor hatte einen Alias ​​>>> und jetzt einen anderen mit dem Namen :: ng-deep.

Da /deep/ combinatores veraltet ist, wird empfohlen, es zu verwenden::ng-deep

Zum Beispiel:

<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>

und css

.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

Es wird auf untergeordnete Komponenten angewendet

VERWENDUNG

::ng-deep, >>>Und /deep/deaktivieren Ansicht Kapselung für bestimmte CSS - Regeln, mit anderen Worten, es gibt Sie auf DOM - Elemente zuzugreifen, die nicht der HTML - Code in Ihrer Komponente sind. Wenn Sie beispielsweise Angular Material (oder eine andere Bibliothek von Drittanbietern wie diese) verwenden, befinden sich einige generierte Elemente außerhalb des Bereichs Ihrer Komponente (z. B. Dialogfeld ), und Sie können nicht direkt oder mithilfe eines normalen CSS auf diese Elemente zugreifen Weg. Wenn Sie die Stile dieser Elemente ändern möchten, können Sie eines dieser drei Dinge verwenden, zum Beispiel:

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

Derzeit empfiehlt das Angular-Team, "tiefe" Manipulationen nur mit EMULATED- Ansichtskapselung durchzuführen .

MISSBILLIGUNG

"tiefe" Manipulationen sind ebenfalls veraltet , ABER es funktioniert vorerst noch, da Angular die Vorverarbeitung unterstützt (beeilen Sie sich nicht, dies ::ng-deepheute abzulehnen , werfen Sie zuerst einen Blick auf die Abwertungspraktiken ).

Bevor Sie diesen Weg gehen, empfehle ich Ihnen, einen Blick auf das Deaktivieren des Ansatzes zur Ansichtskapselung zu werfen (was auch nicht ideal ist, da Ihre Stile in andere Komponenten eindringen können), aber in einigen Fällen ist dies ein besserer Weg. Wenn Sie die Ansichtskapselung deaktivieren möchten, wird dringend empfohlen, bestimmte Klassen zu verwenden, um Überschneidungen von CSS-Regeln zu vermeiden und schließlich ein Durcheinander in Ihren Stylesheets zu vermeiden. Es ist wirklich einfach, direkt in der .tsDatei der Komponente zu deaktivieren :

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

Weitere Informationen zur Ansichtskapselung finden Sie in diesem Artikel.

Ich möchte betonen, wie wichtig es ist, die ::ng-deepAnzahl der untergeordneten Elemente einer Komponente auf nur untergeordnete Elemente zu beschränken, indem der Elternteil eine gekapselte CSS-Klasse sein muss.

Damit dies funktioniert, ist es wichtig, das ::ng-deepNach dem übergeordneten Element zu verwenden, nicht vorher, da es sonst für alle Klassen mit demselben Namen gilt, sobald die Komponente geladen wird.

Komponente CSS:

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

Komponentenvorlage:

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

Resultierende (Winkel generierte) CSS:

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

BEARBEITEN:

Sie können dasselbe Verhalten erzielen, indem Sie das :hostSchlüsselwort verwenden, anstatt eine neue CSS-Klasse zu erstellen.

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

Verpassen Sie nicht die Erklärung, :host-contextdie sich direkt oben ::ng-deepin der Winkelführung befindet: https://angular.io/guide/component-styles . Haftungsausschluss: Ich habe es bis jetzt verpasst und wünschte, ich hätte es früher gesehen.

::ng-deepDies ist häufig erforderlich, wenn Sie die Komponente nicht geschrieben haben und keinen Zugriff auf ihre Quelle haben. Dies :host-contextkann jedoch eine sehr nützliche Option sein, wenn Sie dies tun.

Ich habe beispielsweise einen schwarzen <h1>Header in einer von mir entworfenen Komponente und möchte ihn in Weiß ändern können, wenn er auf einem dunklen Hintergrund angezeigt wird.

Wenn ich keinen Zugriff auf die Quelle hatte, muss ich dies möglicherweise in der CSS für das übergeordnete Element tun:

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

Stattdessen :host-contextkönnen Sie dies innerhalb der Komponente tun .

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

Dies sucht überall in der Komponentenkette nach .theme-darkdem CSS und wendet es auf das h1 an, falls es gefunden wird. Dies ist eine gute Alternative, um sich zu sehr darauf zu verlassen, ::ng-deepwas zwar oft notwendig ist, aber ein Anti-Muster darstellt.

In diesem Fall &wird das durch das ersetzt h1(so funktioniert sass / scss), sodass Sie Ihr "normales" und thematisches / alternatives CSS direkt nebeneinander definieren können, was sehr praktisch ist.

Achten Sie darauf, die richtige Anzahl von zu erhalten :. Denn ::ng-deepes gibt zwei und :host-contextnur einen.

Nur ein Update:

Sie sollten ::ng-deepstattdessen verwenden, /deep/was veraltet zu sein scheint.

Pro Dokumentation:

Der Schatten-durchdringende Nachkommen-Kombinator ist veraltet und die Unterstützung wird von den wichtigsten Browsern und Tools entfernt. Aus diesem Grund planen wir, die Unterstützung in Angular einzustellen (für alle 3 von / deep /, >>> und :: ng-deep). Bis dahin sollte :: ng-deep für eine breitere Kompatibilität mit den Tools bevorzugt werden.

Sie finden es hier

Verwenden Sie :: ng-deep mit Vorsicht. Ich habe es in meiner gesamten App verwendet, um die Farbe der Symbolleiste für das Materialdesign in meiner App auf verschiedene Farben festzulegen, nur um festzustellen, dass die Farben der Symbolleiste beim Testen der App aufeinander zugehen. Finden Sie heraus, dass diese Stile global werden. Lesen Sie diesen Artikel. Hier ist eine funktionierende Codelösung, die nicht in andere Komponenten übergeht.

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

}