时间戳

首页 > 解决方案 > 如何根据打字稿或Javascript中的URL参数值动态应用多个CSS文件

css - 如何根据打字稿或Javascript中的URL参数值动态应用多个CSS文件

问题描述

我已经编写了获取 URL 参数值的代码

export class RedirectingComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) { }
  ngOnInit()
  {
    this.activatedRoute.paramMap.subscribe(params=>
      {
        let color=params.get('color');
        console.log(color);
        if(color)
        {
          if(color=='red')
          {
            //So If the color is red then we should apply red.css
          }
        }
      })
  }
}
Here are the css files

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

blue.css
.my-container{
    height: 100%;
    background-color: red;
}
Here is the Main Page 
<mat-toolbar color="primary">
    <span class="mainheading">Theme Changing</span>
</mat-toolbar>
<div class="my-container">
    <h1 class="sideheading">URL that entered are processed for Theme Changing of the Page</h1>
</div>

现在我必须使用颜色等参数值并将背景更改为提到的颜色，如果提到的颜色是红色，则背景应该变为红色。

注意：它们应该是不同的 CSS 文件

标签： cssangular

解决方案

您无法通过角度指令控制标题标签。

您可以创建style标签并在其中导入不同的文件。然后通过*ngIf指令控制它们。

<style type="text/css" *ngIf="rule1">
  @import 'path\to\file-1';
</style>

<style type="text/css" *ngIf="rule2">
  @import 'path\to\file-2';
</style>

推荐阅读