有條件地將 CSS 文件導入到 Angular 組件中

Question

我在單個 Angular 組件中有不同的 CSS 文件（red.css，blue.css）。我們如何根據條件導入 css 文件。 如果我提到顏色為紅色，則應該導入 red.css 文件。

 this.activatedRoute.paramMap.subscribe(params=> { let color=params.get('color'); console.log(color); })

 red.css .my-container{ height: 100%; background-color: red; } blue.css .my-container{ height: 100%; background-color: blue; }

 <div class="my-container"> <h1 class="sideheading">URL that entered are processed for Theme Changing of the Page</h1> </div>

多個 CSS 文件和條件，將顏色作為輸入，並應根據給定的顏色應用 css 文件。

Answer 1

CSS部分：

.my-red-container{
    height: 100%;
    background-color: red;
}

.my-blue-container{
    height: 100%;
    background-color: blue;
}

角度部分：假設您有名為 color 的 typescript var，其值為“blue”或“red”

  <div
    [ngClass]="{'my-red-container': color === 'red', 'my-blue-container' : color === 'blue' }"
    ></div>

Answer 2

CSS 部分

.my-red-container{
    height: 100%;
    background-color: red;
}

.my-blue-container{
    height: 100%;
    background-color: blue;
}

Component.html 部分

<div [ngClass]="{color === 'red' ? 'my-red-container' : 'my-blue-container'}">
</div>