使用不同的 CSS 样式表动态更改 Angular 组件的样式

Question

我正在尝试对单页应用程序进行动态样式表更改以在 Angular 中工作。这个想法是创建不同的主题，并让用户在专用菜单中选择它们。可能有很多主题，所以请不要介意下面的示例只有两个变体。功能已准备就绪。到目前为止，我已经将所有样式收集在单个大型 scss 文件中，每个主题一个。 （请注意，我很清楚，在 Angular 中，您经常为每个组件将样式拆分为许多子 scss 文件。但为了使这个想法奏效，我希望将它们全部放在每个主题的单个文件中）。我的菜单正常工作，并使用本地存储让应用记住选择了哪个主题，因为必须重新加载网站才能使更改生效。

现在解决问题： 在 app.component.ts 中，样式表以标准格式定义（即 styleUrls: [filename]）。当在那里使用静态文件路径/名称时，以及使用在 @component-code 之外定义的变量时，样式可以完美运行。但是对于动态主题更改，我从 localstorage 中简单地获取了变量：

var settingsString = localStorage.getItem('usergraphicsdata');
if (isDefined(settingsString)) {
  let myUserSettings = JSON.parse(settingsString);
  const themename = myUserSettings.theme;

这一切也都在那里工作。不同的 console.logs 确认它理解了它应该理解的一切。但是问题来了。

if(themename == "theme1"){
    var stylePath = "./app.component_theme1.scss";
    var graphicFolder = '/assets/theme1/';
    } else if(themename == "theme2"){
    var stylePath = "./app.component_theme2.scss";
    var graphicFolder = '/assets/theme2/';
    }
  }

然后是 @component 及其 styleUrls: [stylePath]

由于某种原因不考虑 if 条件，结果总是首先声明的主题（在上述情况下为“theme1”）将处于活动状态。因此，如果我只是更改条件中的顺序，并将主题 2 的代码放在第一位，那么将为站点选择该代码，而不管实际从 localstorage 获取哪个主题变量

我也尝试了其他几种变体，但这个似乎最接近解决方案。 Angular 在运行时 contra 构建中限制样式更改可能是个问题吗？还是我忘记了 if 条件中的一些基本内容？

最好的问候和对不起我有限的英语。 每

Answer 1

为什么不用路由来解决呢？为每个主题复制组件，只是使用不同的 css 文件，但对所有这些组件使用相同的 html 文件，并在菜单中放置指向该组件的链接（具有特定主题）。附加值是主题名称也出现在 url 中，您可以轻松应用不同的逻辑，而不会让事情变得复杂（不同的打字稿文件）。

类似这样的：

@Component({
  selector: 'sunflower',
  templateUrl: './detail.component.html',
  styleUrls: ['./sunflower.component.scss']
})
export class SunflowerComponent {

@Component({
  selector: 'roses',
  templateUrl: './detail.component.html',
  styleUrls: ['./roses.component.scss']
})
export class RosesComponent {

如果你试过了，请分享你遇到的问题。

更新

我做了一个非常基本的演示（我已经测试过），你可以在这里找到它：

repo

保重，祝你好运。