Angular從組件內(nèi)部更改styleUrls值

這樣不行。下面是一個簡單的示例，其中包含兩個css文件和ngClass

下面是根據(jù)用戶交互使組件變亮/變暗。

styleUrls: ['./app.component.light.css', './app.component.dark.css']

樣式表-light(app.component.light.css）

.light.highlight {
    color: #fff;
    background-color: #000;
}

樣式表-dark(app.component.dark.css）

.dark.highlight {
    color: #000;
    background-color: #fff;
}

現(xiàn)在為整個組件創(chuàng)建一個基本包裝器div

<div [ngClass]="isLight ? 'light': 'dark'">
    <!--component content goes here-->
</giv>

如果改用SCS，您可以像在html中一樣使用包裝器

.light {
    // page styles go here
}