可以将样式表的urls动态注入到组件中吗?
类似于:
styleUrls: [
'stylesheet1.css',
this.additionalUrls
]
或者(如意算盘,注意这只是假代码):
export class MyComponent implements dynamicUrls {
ngDynamicUrls() {
this.inject(['anotherStylesheet.css', 'anotherStylesheet2.css']);
}
}
因为如果您能够在不访问stylesheet1
的情况下覆盖来自它的某些样式,您应该如何做到这一点?我唯一的想法是以某种方式拥有动态styleUrls
,但从我能找到的情况来看,我认为这是不可能的。
有什么想法吗?
发布于 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 ......
发布于 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字符串。
发布于 2016-04-12 15:13:51
我曾经有同样的需求动态地将urls注入到样式表中,最终使用空模板为每个变量css (在我的例子中是3种不同的样式)初始化一个组件,并在我的应用程序组件中使用ngIf条件。
由于使用了属性"encapsulation: ViewEncapsulation.None",所选组件的样式随后被添加到页面的页眉,并启用以获得整个页面的正确渲染器。
https://stackoverflow.com/questions/36531486
复制相似问题