Ich bin neu in Angular 4, kann jemand bitte erklären, wie und wo ::ng-deep
in 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?
css
angular
angular-template
Jeyabalan Thavamani
quelle
quelle
/deep/
und::ng-deep
beide sind veraltet, empfehle ich Ihnen auf diese Antwort zu nehmen alook stackoverflow.com/a/49308475/2275011 für weitere Details und Lösungen und Kommentare.Antworten:
Normalerweise
/deep/ “shadow-piercing”
kann ein Kombinator verwendet werden, um einen Stil auf zu erzwingenchild components
. Dieser Selektor hatte einen Alias >>> und jetzt einen anderen mit dem Namen :: ng-deep.Da
/deep/ combinator
es 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
quelle
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-deep
heute 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
.ts
Datei 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.
quelle
ViewEncapsulation.None
! Es wird viel Schaden anrichten, wenn diese Stile in andere Komponenten eindringen können.Ich möchte betonen, wie wichtig es ist, die
::ng-deep
Anzahl 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-deep
Nach 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
:host
Schlüsselwort verwenden, anstatt eine neue CSS-Klasse zu erstellen.:host ::ng-deep .mat-checkbox-layout
quelle
my-component ::ng-deep...
hat mir gerade den Tag gerettet. Ich habe den ganzen Tag versucht, mit ng-deep einen Stil für meine Komponente anzuwenden, und habe alle Komponenten aus meiner gesamten Anwendung überschrieben.:host
Schlüsselwort - hat der Antwort aus Gründen der Übersichtlichkeit einen Hinweis hinzugefügt.Verpassen Sie nicht die Erklärung,
:host-context
die sich direkt oben::ng-deep
in 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-deep
Dies ist häufig erforderlich, wenn Sie die Komponente nicht geschrieben haben und keinen Zugriff auf ihre Quelle haben. Dies:host-context
kann 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-context
kö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-dark
dem 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-deep
was zwar oft notwendig ist, aber ein Anti-Muster darstellt.In diesem Fall
&
wird das durch das ersetzth1
(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-deep
es gibt zwei und:host-context
nur einen.quelle
:host(.theme-dark)
wenn Sietheme-dark
keine übergeordneten Komponenten erben möchten . Dies hängt vollständig vom CSS-Design Ihrer Website ab. Auch Attribute können sehr nützlich sein und können auf raffinierte Weise allein in:host([theme='dark']:not([dayofweek='tuesday'))
.theme-light
Klasse hat, wird diese wiederum in einem Container verschachtelt, der.theme-dark
diese weiterhin aufnimmttheme-dark
und anwendet CSS. Dies ist jedoch eine großartige Lösung für Klassen vom Typ 'modernizr' oder wenn Sie ein Thema global und nur einmal festgelegt haben.Nur ein Update:
Sie sollten
::ng-deep
stattdessen verwenden,/deep/
was veraltet zu sein scheint.Pro Dokumentation:
Sie finden es hier
quelle
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'); } }
quelle