Angular 角度2-如何有条件地向组件添加样式？

我有一个带有样式表的组件，可以像这样正确加载：

@Component({
  selector: 'open-account',
  styleUrls: ['open-account.component.scss'],
  templateUrl: './open-account.component.html',
})

如果url中存在字符串

widget=true

，但无论如何都无法工作，我希望有条件地加载另一个样式表。我试过：

var stylesArr = ['open-account.component.scss'];
if (window.location.href.indexOf('widget=true') > -1) stylesArr.push('open-account-widget-styles.component.scss');

@Component({
  selector: 'open-account',
  styleUrls: stylesArr,
  templateUrl: './open-account.component.html',
})

及

及

在我的html的顶部：

<style type="text/css" *ngIf="false">
(the 'false' would be a variable, but putting in false doesnt even stop the style from loading)
...
</style>

（false将是一个变量，但输入false甚至不会停止加载样式）
...

---

我该怎么做才能有条件地加载这样的附加样式表？我不知道还有什么可以尝试。

我发现它唯一有效的方法就是这样做：

 import { Component, Inject } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';

 @Component({
 })

 export class SomeComponent {

    constructor (@Inject(DOCUMENT) private document) { }

        LightTheme() {
            this.document.getElementById('theme').setAttribute('href', 'light-theme.css');


        DarkTheme() {
            this.document.getElementById('theme').setAttribute('href', 'dark-theme.css');
    }
}

addStyleSheet() {
  var headID = document.getElementsByTagName('head')[0];
  var link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.id = 'widget_styles';
  headID.appendChild(link);

  link.href = './app/open-account/open-account-widget-styles.component.css';
}

ngOnInit() {
  this.addStyleSheet();
}

---

所以，如果您将组件作为小部件加载，您想使用不同的css吗？你是如何构建你的应用程序的？你在使用AOT吗？@SanderElias确切地说，如果我将组件作为小部件加载，并且正在构建中，那么我想加载一个额外的sytlesheetAOT@SanderElias此外，在我们将构建切换到AOT之前，这些方法中的许多都是有效的，现在它们都不起作用。AOT不起作用的原因是执行顺序不同。用于“选择”样式表的代码将在编译时调用，而不再在运行时调用。您可以在编译之前更改样式数组，但不能在编译之后更改。您需要在运行时加载样式表，还是可以将其存储为应用程序代码的一部分？通过id获得的

主题
元素是什么？
 import { Component, Inject } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';

 @Component({
 })

 export class SomeComponent {

    constructor (@Inject(DOCUMENT) private document) { }

        LightTheme() {
            this.document.getElementById('theme').setAttribute('href', 'light-theme.css');


        DarkTheme() {
            this.document.getElementById('theme').setAttribute('href', 'dark-theme.css');
    }
}

addStyleSheet() {
  var headID = document.getElementsByTagName('head')[0];
  var link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.id = 'widget_styles';
  headID.appendChild(link);

  link.href = './app/open-account/open-account-widget-styles.component.css';
}

ngOnInit() {
  this.addStyleSheet();
}