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

Question

我有一个加载正确这样的样式表的成分：

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

我想如果字符串widget=true是出现在URL，但无论如何不能去工作，有条件地加载另一个样式表。我曾尝试：

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', 
}) 

和

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', 
}) 

和

@Component({ 
    selector: 'open-account', 
    styleUrls: ['open-account.component.scss', 'open-account-widget-styles.component.scss'].filter(elem => { 
    if (elem === 'open-account.component.scss') return true; 
    if (elem === 'open-account-widget-styles.component.scss' && window.location.href.indexOf('widget=true') > -1) return true; 
    }), 
    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> 

我能做些什么来有条件地负载像这样的其他样式表？我不知道还有什么要尝试。

Answer 1

，我发现它的工作的唯一方法是做到这一点：

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(); 
} 

Answer 2

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'); 
    } 
}