Angular 4 在 angular-cli 中切换样式表

Question

我想知道是否可以切换主题(2 个样式表)。我的实际配置是 angular-cli.json 配置中的样式表 A。我想做的是用一个简单的(单击)切换器将样式表 A 替换为样式表 B。

如果我将样式表导入到 index.html 中，代码将如下所示

组件:

constructor() { }

  toggleTheme() {
    this.darkTheme = this.lightTheme;
  }

索引.html

<div [class.dark]="darkTheme">
<div [class.light]="lightTheme">
<button (click)="toggleTheme()">
Toggle theme
</button>

但是由于我在 angular-cli.json 文件而不是 index.html 中导入样式表 dark.css，我该如何解决这个问题？

Answer 1

在 Angular 中，每个组件都有自己的样式表文件，范围仅针对组件。我认为您想更改索引文件中的主样式表，但自 Angular 组件以来，它没有要更改的上下文或范围。

您可以在您的主要组件中执行此操作(作为共享布局)。但请记住，任何子组件都不具有样式表范围。