Angular SET组件样式动态

Question

我在新项目中使用了最新版本的angualar 5.0。我是这个框架的新手，并感谢Angular开发人员的一些帮助。

我想在运行时动态设置具有类级变量的styleurls属性。就我而言，StyleRL路径将通过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');
    }

是否可以在ngoninit事件中或从searchComponent类的构造函数中设置组件的 styleurls属性。

就我而言，每个客户都有自己的样式表。因此，我需要从数据库中拉出样式表路径并动态填充@components属性。

Answer 1

我不是专家，但我认为鉴于Angular的工作方式，您不可能做什么。

我相信styleUrls指向的CSS或styles中提供的文字CSS与组件HTML一起传递给模板编译器(称为Ivy，以现代角度称为Ivy(。这使得"组件工厂"用于在运行时制作组件实例。工厂可以在构建时间(提前/AOT(进行编译，也可以在客户端上动态，但是即使在最初加载所有模块时，我认为它也会被编译 - 如果可以在苍蝇，我没有看到任何方法。

我建议的是为每个(类型的(客户端制作一个单独的模块，然后查找用于该客户端的哪个模块，并用路由器将其延迟加载。或者，也许您可以将各种样式表的共同部分分解为一个静态表，并使用ngClass条件进行动态的其余部分。

Answer 2

您可以使用功能动态计算DE样式文件以加载：

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 var值加载它们。您还可以编辑该功能，以始终加载基本CSS和覆盖某些样式的特定功能。