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

18
Srikanth Sharma 18 Apr. 2018 im 18:27

4 Antworten

Beste Antwort

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

10
Srikanth Sharma 18 Apr. 2018 im 19:32

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

1
Asaf Agranat 25 Juli 2019 im 22:10

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

Live-Demo

Vielleicht möchten Sie auch die folgende Antwort lesen: Winkel 5: So definieren Sie eine Farbpalette in einer zentralen Datei

0
Tomasz Kula 18 Apr. 2018 im 15:42

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

-1
Alexis Poo 18 Apr. 2018 im 16:00