Gibt es eine Möglichkeit, eine CSS-Variable, die auf der Stammebene einer Komponente definiert ist, mithilfe von Angular-Methoden zu steuern? In JavaScript haben wir document.documentElement.style.setProperty(), wenn wir auf Root-Ebene festlegen.
Können wir im Winkel ': host' verwenden, um die CSS-Variable für den globalen Zugriff innerhalb der Komponente zu deklarieren? oder müssen wir so etwas wie ':: ng-deep: root' verwenden?
Die folgende Frage bleibt ebenfalls unbeantwortet: Angular: Verwenden Sie Renderer 2, um eine CSS-Variable hinzuzufügen
4 Antworten
Ja, Sie können Variablen im Stammbereich festlegen:
:root {
--main-color: red
}
Ja, Sie können den Selektor :host verwenden, um auf das Element zu zielen, in dem die Komponente gehostet wird.
:host {
display: block;
border: 1px solid black;
}
Sie können auch :host-context verwenden, um einen beliebigen Vorfahren der Komponente anzuvisieren. Der Selektor: host-context () sucht nach einer CSS-Klasse in einem beliebigen Vorfahren des Komponenten-Host-Elements bis zum Dokumentstamm.
:host-context(.theme-light) h2 {
background-color: #eef;
}
Hinweis: ::ng-deep oder /deep/ oder >>> ist veraltet.
Lesen Sie hier mehr darüber: spezielle CSS-Selektoren in Winkel
Nur eine zusätzliche Information. Es funktioniert sowohl in ': root' als auch in ': host'. Wir können Werte festlegen, indem wir:
constructor(private elementRef: ElementRef) { } dann this.elementRef.nativeElement.style.setProperty('--color', 'red');
Die konstruktivste und modularste Methode zur Verwendung von CSS-Variablen in Komponenten (mit viewEncapsulation) ist die folgende:
// global css
:root {
--main-color: red
--alt-color: blue
}
// inside component component css
::ng-deep :root {
--specific-css-var: var(--main-color)
}
:host {
background-color: var(--specific-css-var)
}
:host(.conditional-class) {
--specific-css-var: var(--alt-color)
}
HINWEIS : Obwohl ::ng-deep veraltet ist, wurde es noch nicht ersetzt (und hat keinen Ersatz), wie in mehreren Diskussion wie diese
Ja, du kannst. So was:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1 style="color: var(--color)"> Hello world </h1>
`,
styles: [
`:host { --color: red; }`
]
})
export class AppComponent {}
Vielleicht möchten Sie auch die folgende Antwort lesen: Winkel 5: So definieren Sie eine Farbpalette in einer zentralen Datei
Das Beste für jede Komponente wie eine Hintergrundfarbe ohne Verwendung von :: ng-deep (was bg für alle Kinder festlegt)
Importieren Sie Folgendes
import {ElementRef} from '@angular/core';
Deklarieren Sie elementref im Konstruktor
constructor(private elementRef: ElementRef) {}
Rufen Sie dann die Funktion ngAfterViewInit () auf
ngAfterViewInit(){
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = ' white';
}
Dadurch wird bg auf weiß gesetzt, aber Sie können es auch durch eine hexadezimale Farbe ersetzen, sodass Sie dies mit jeder Komponente tun können
Verwandte Fragen
Neue Fragen
css
CSS (Cascading Style Sheets) ist eine Darstellungs-Stylesheet-Sprache, die zur Beschreibung des Erscheinungsbilds und der Formatierung von HTML-Dokumenten (HyperText Markup Language), XML-Dokumenten (Extensible Markup Language) und SVG-Elementen verwendet wird, einschließlich (aber nicht beschränkt auf) Farben, Layout, Schriftarten, und Animationen. Außerdem wird beschrieben, wie Elemente auf dem Bildschirm, auf Papier, in der Sprache oder auf anderen Medien gerendert werden sollen.