angular 2中的动态styleUrls？
angular 2中的动态styleUrls？
提问于 2016-04-10 23:13:33
可以将样式表的urls动态注入到组件中吗？
类似于：
styleUrls: [
'stylesheet1.css',
this.additionalUrls
]或者(如意算盘，注意这只是假代码)：
export class MyComponent implements dynamicUrls {
ngDynamicUrls() {
this.inject(['anotherStylesheet.css', 'anotherStylesheet2.css']);
}
}因为如果您能够在不访问stylesheet1的情况下覆盖来自它的某些样式，您应该如何做到这一点？我唯一的想法是以某种方式拥有动态styleUrls，但从我能找到的情况来看，我认为这是不可能的。
有什么想法吗？
回答 5
Stack Overflow用户
发布于 2016-09-29 02:54:35
这是可能的，也许是黑客的方式，它对我有效。你可以操纵Angular 2组件装饰器，创建自己的装饰器，并用你的属性返回Angular的装饰器。
import { Component } from '@angular/core';
export interface IComponent {
selector: string;
template?: string;
templateUrl?: string;
styles?: string[];
styleUrls?: string[];
directives?: any;
providers?: any;
encapsulation?: number;
}
export function CustomComponent( properties: IComponent): Function {
let aditionalStyles: string;
try {
aditionalStyles = require(`path to aditional styles/${ properties.selector }/style/${ properties.selector }.${ GAME }.scss`);
properties.styles.push(aditionalStyles);
} catch (err) {
console.warn(err)
}
}
return Component( properties );
}在你的组件中，用新的替换默认的angular 2@组件。
import { CustomComponent } from 'path to CustomComponent';
@CustomComponent({
selector: 'home',
templateUrl: './template/home.template.html',
styleUrls: [ './style/home.style.scss']
})
export class ......Stack Overflow用户
发布于 2018-08-28 17:12:48
我找到了一个解决方案：
我已经在组件装饰器中将styleurls更改为style。我将获得我的变量。我将在我的装饰器中使用require命令。
import { Component } from '@angular/core';
import { environment } from '../environments/environment';
let lang = environment['lang'];
@Component({
selector: 'app',
templateUrl: './app.component.html',
styles: [require('./app.component.css'), require('./app.component.' + lang + '.css')]
})
export class AppComponent {
constructor() { }
}在这个基本示例中，我导入了环境变量并动态更改了css字符串。
Stack Overflow用户
发布于 2016-04-12 15:13:51
我曾经有同样的需求动态地将urls注入到样式表中，最终使用空模板为每个变量css (在我的例子中是3种不同的样式)初始化一个组件，并在我的应用程序组件中使用ngIf条件。
由于使用了属性"encapsulation: ViewEncapsulation.None"，所选组件的样式随后被添加到页面的页眉，并启用以获得整个页面的正确渲染器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36531486
复制相关文章
相似问题