基于路由的Angular2主题切换：按路由引入对应样式文件

嘿，我来给你几个实用的方案解决这个动态路由加载主题CSS的需求：

方案1：页面加载时动态插入对应CSS标签 #

这种方法适合静态路由场景，页面加载时直接检测当前路径并生成对应的主题链接：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Theme Switcher</title>
  <script>
    // 获取当前页面的路由路径
    const currentRoute = window.location.pathname;
    let themeUrl;

    // 根据路由匹配对应的主题CSS
    if (currentRoute === '/books') {
      themeUrl = '/assets/css/reading-theme.css';
    } else if (currentRoute === '/paintings') {
      themeUrl = '/assets/css/gallery-theme.css';
    }

    // 如果匹配到主题，创建link标签并插入到head中
    if (themeUrl) {
      const themeLink = document.createElement('link');
      themeLink.rel = 'stylesheet';
      themeLink.href = themeUrl;
      document.head.appendChild(themeLink);
    }
  </script>
</head>
<body>
  <!-- 你的页面内容 -->
</body>
</html>

方案2：预留主题标签，动态修改href（适合SPA场景） #

如果你的项目是单页应用，需要支持路由切换时实时更新主题，这种方案更合适——提前在head里放一个空的主题链接，然后根据路由变化修改它的地址：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Theme Switcher</title>
  <!-- 提前预留主题link标签，给个ID方便获取 -->
  <link id="dynamic-theme" rel="stylesheet" href="">
  <script>
    // 封装更新主题的函数
    function updateTheme() {
      const currentRoute = window.location.pathname;
      const themeLink = document.getElementById('dynamic-theme');

      switch(currentRoute) {
        case '/books':
          themeLink.href = '/assets/css/reading-theme.css';
          break;
        case '/paintings':
          themeLink.href = '/assets/css/gallery-theme.css';
          break;
        default:
          // 可选：路由不匹配时清空主题，或者设置默认样式
          themeLink.href = '';
          break;
      }
    }

    // 页面加载完成后初始化主题
    window.addEventListener('load', updateTheme);

    // 如果是使用history模式的SPA，监听浏览器前进后退事件更新主题
    window.addEventListener('popstate', updateTheme);

    // 如果你用的是框架路由（比如Vue Router、React Router），记得在路由守卫/监听里调用updateTheme()
  </script>
</head>
<body>
  <!-- 你的页面内容 -->
</body>
</html>

额外补充 #

你提到的reading-theme.css内容是：

html, body { 
  background-color: #000; 
  box-sizing: border-box; 
}

只需要按照你的需求写好gallery-theme.css里的背景样式即可，两种方案都会根据当前路由自动加载对应的主题，实现页面背景的切换。

内容的提问来源于stack exchange，提问作者smk