[英]How do I get my Angular 6 components to inherit it's extended component's styles?
[英]Angular 2 - How do I conditionally add styles to my component?
我有一个带有样式表的组件,可以像这样正确加载:
@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>
如果有条件地加载这样的附加样式表,我该怎么办? 我不知道还有什么可以尝试。
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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.