Как обновить стили Angular Компонент динамически

Question

У меня есть простой Angular Компонент.

@Component({
    selector: 'app-component-test',
    templateUrl: './component-test.component.html',
    styles: [example],
    encapsulation: ViewEncapsulation.None,
    providers: []
})

Я хочу обновить стили внутри класса компонента. Как мне этого добиться?

Answer 1

Это немного глупо, но вот возможное решение. Если вы не хотите, чтобы ваши стили просачивались в другие компоненты вашего приложения (но это нормально для дочерних компонентов), вы можете добавить к своим стилям префикс _ngHost-*****, который angular добавляет к компонентам.

Таким образом, ваши правила будут выглядеть следующим образом:

[_nghost-ybl-c433] p { color: red;}
[_nghost-ybl-c433] h1 { color: blue;}

component.ts

constructor(private renderer: Renderer2, private elementRef: ElementRef) {}


private applyStylesFromAPI()
{
    //Find component prefix first
    let compPrefix = Array.from<Attr>(this.elementRef.nativeElement.attributes)
        .find(att=>att.nodeName.startsWith('_nghost')).nodeName;


    //Create style tag and add styles from API 
    let styleElt = this.renderer.createElement('style');

    styleElt.innerHTML = this.getAPIStyles(compPrefix);
    this.elementRef.nativeElement.appendChild(styleElt);
}

private getAPIStyles(compPrefix: string)
{
   //Retrieve the CSS styles from API, each rule prefixed with [compPrefix]

Если вы не можете изменить API для добавления префикса, вам придется сделать следующее: эта сторона клиента ...

Демонстрация Stackblitz