Угловая установка компонента styleUrls динамически

Question

Я использую последнюю версию angualar 5.0 в новом проекте. И я новичок в этом фреймворке и был бы признателен за помощь от угловых разработчиков.

Я хотел бы установить свойство styleUrls с переменной уровня класса динамически во время выполнения. В моем случае путь styleURL будет поступать из базы данных через службу angular.

import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({    
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.css']
})


export class SearchComponent {
    pageName = 'New Search Page';
    PropfavMovie = 'Gladiator';

    constructor(private _titleSrv: Title) {
        this._titleSrv.setTitle('Search page');

    }

Есть ли способ, которым я могу установить свойство styleUrls компонента в событии ngOnInit или из конструктора класса SearchComponent.

В моем случае у каждого клиента есть своя собственная таблица стилей. Поэтому мне нужно извлечь путь из таблицы стилей из базы данных и динамически заполнить свойство @components.

Answer 1

Я не эксперт, но не думаю, что то, о чем вы просите, возможно, учитывая то, как работает Angular.

Я считаю, что CSS, на который указывает styleUrls, или буквальный CSS, представленный в styles, передается компилятору шаблона (называемому Ivy в современном Angular) вместе с HTML-компонентом. Это создает "фабрику компонентов", которая используется для создания экземпляров компонентов во время выполнения. Фабрика может быть скомпилирована во время сборки (опережая время / AOT) или динамически на клиенте, но даже в последнем случае я думаю, что она компилируется при первоначальной загрузке владеющего модуля - если возможно скомпилировать новую фабрику на муха, я не видел никакого способа сделать это.

Я бы посоветовал создать отдельный модуль для каждого (типа) клиента, а затем найти, какой модуль использовать для этого клиента, и отложить его загрузку с помощью маршрутизатора. В качестве альтернативы, возможно, вы можете выделить общие части различных таблиц стилей в один статический лист и сделать остальную часть стиля динамической, используя ngClass условные.

Answer 2

Вы можете использовать функцию для динамического вычисления файла стиля для загрузки:

import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';

//An alias that stores environment vars
import { ENV } from '@app/env';

//Function that calculates de css to load
export function getBrandCSS(styles: string[]): string [] {
    for(let i=0;i<styles.length;i++){
        styles[i] = './' + ENV.BRAND + '.' + styles[i];
    }
   return styles;
}

@Component({    
    templateUrl: './search.component.html',
    styleUrls: getBrandCSS(['search.component.css'])
})
export class SearchComponent {
    pageName = 'New Search Page';
    PropfavMovie = 'Gladiator';

    constructor(private _titleSrv: Title) {
        this._titleSrv.setTitle('Search page');
    }
}

Таким образом, вы можете иметь несколько CSS-файлов, названных так:

> brand1.search.component.css
> brand2.search.component.css
> brand3.search.component.css
> ***.search.component.css

Они будут загружены на основе значения переменной ENV. Вы также можете редактировать функцию, чтобы всегда загружать базовый CSS и тот, который переопределяет определенные стили.