如何在Typescript或Javascript中根据URL参数动态加载多个CSS文件

前置准备 #

• 首先修正blue.css的错误配置，你当前给出的blue.css背景色仍为red，修改为如下内容：

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

• 将red.css、blue.css两个样式文件存放到项目的src/assets/css/目录下（没有对应文件夹可手动创建），确保Angular构建时会把assets目录的资源正常打包输出。

实现步骤 #

1. 封装动态样式控制逻辑 #

在组件中实现工具方法，负责加载指定CSS文件、移除之前加载的主题CSS，避免多套样式叠加冲突。

2. 整合到参数监听逻辑 #

在paramMap的订阅回调中，拿到color参数后，先移除旧的主题样式，再加载对应color的CSS文件即可。

完整组件代码示例 #

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-redirecting',
  templateUrl: './redirecting.component.html',
  styleUrls: ['./redirecting.component.css']
})
export class RedirectingComponent implements OnInit {
  // 记录当前加载的主题CSS元素，方便后续移除
  private currentThemeLink: HTMLLinkElement | null = null;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.activatedRoute.paramMap.subscribe(params => {
      const color = params.get('color');
      // 只处理合法的颜色参数值
      if (color && ['red', 'blue'].includes(color)) {
        this.loadThemeCss(color);
      }
    })
  }

  private loadThemeCss(color: string): void {
    // 先移除之前加载的主题CSS，避免样式覆盖冲突
    if (this.currentThemeLink) {
      document.head.removeChild(this.currentThemeLink);
      this.currentThemeLink = null;
    }

    // 创建新的link标签加载对应CSS文件
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = `assets/css/${color}.css`;
    link.id = `theme-${color}-css`;

    // 加载完成后记录当前使用的link元素
    link.onload = () => {
      this.currentThemeLink = link;
    };

    document.head.appendChild(link);
  }
}

补充注意事项 #

• 要确保根元素高度适配，避免.my-container的100%高度不生效，可在全局的styles.css中添加：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

• 如果你的Angular项目配置了资源路径前缀，需要对应调整link.href的资源路径，确保可以正确访问到CSS文件。

内容的提问来源于stack exchange，提问作者Eswar Sai Pallapolu