Angular 动态设置组件 styleUrls

Question

我在新项目中使用的是最新版本的angualar 5.0。我是这个框架的新手，非常感谢 angular 开发人员的帮助。

我想在运行时使用 class 级别变量动态设置 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');

    }

有没有一种方法可以在 ngOnInit 事件中或从 SearchComponent class 的构造函数中设置组件的 styleUrls 属性。

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

Answer 1

您可以使用一个函数来动态计算要加载的样式文件：

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 和覆盖某些样式的特定基础。

Answer 2

我不是专家，但鉴于 Angular 的工作方式，我不认为你要求做的是可能的。

我相信 styleUrls 指向的 CSS 或 styles 中提供的文字 CSS 被传递给模板编译器（称为 Ivy，在现代Angular) 以及组件 HTML。这将创建一个“组件工厂”，用于在运行时创建组件实例。工厂可以在构建时（提前/AOT）或在客户端动态编译，但即使在后一种情况下，我认为它是在最初加载拥有的模块时编译的——如果可以编译一个新工厂苍蝇，我还没有看到任何方法。

我的建议是为每个（类型的）客户端创建一个单独的模块，然后查找要用于该客户端的模块，并 lazy-loading 它与路由器一起使用。或者，也许您可以将各种样式 sheet 的公共部分分解为一个静态 sheet，并使用 ngClass 条件使样式的其余部分动态化。

Angular 动态设置组件 styleUrls

Angular set component styleUrls dynamically

angular

angular-components

angular-component-life-cycle