Question

我在新项目中使用最新版本的angualar 5.0。我是这个框架的新手，并希望得到角度开发人员的一些帮助。

我想动态地在运行时使用类级别变量设置styleUrls属性。在我的例子中，styleURL路径将通过角度服务来自数据库。

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类的构造函数中设置Component的 styleUrls属性。

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

Answer 1

我不是专家，但我不认为您要执行的操作基于Angular的工作方式是可行的。

我相信styleUrls指向的CSS或styles中提供的文字CSS与组件HTML一起传递到模板编译器（在现代Angular中称为Ivy）。这将创建一个“组件工厂”，用于在运行时创建组件实例。工厂可以在构建时（提前/ 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 var值加载。您还可以编辑该函数，以始终加载基本CSS和覆盖某些样式的特定CSS。

角度设置组件styleUrls动态

2 个答案: