Javascript 动态地将样式注入到角度组件中
我有一个组件,我想将CSS样式应用于使用CSS道具的选择器对象 从父级应用的样式Javascript 动态地将样式注入到角度组件中,javascript,css,angular,Javascript,Css,Angular,我有一个组件,我想将CSS样式应用于使用CSS道具的选择器对象 从父级应用的样式 const styles = { a: [ ['color', 'red'] ], b: [ ['color', 'blue'] ] }; 要动态设置样式的组件 @Component({ selector: 'test', template: ` <div> <span class="a">I am A<
const styles = {
a: [
['color', 'red']
],
b: [
['color', 'blue']
]
};
要动态设置样式的组件
@Component({
selector: 'test',
template: `
<div>
<span class="a">I am A</span>
<span class="b">I am B</span>
</div>
`
})
export class Test implements OnInit {
@Input() stylesToApply: { [key: string]: string[][] };
constructor(private _renderer: Renderer2, private _element: ElementRef) {}
ngOnInit() {
let styleText = '';
Object.entries(this.stylesToApply).forEach(([key, value]) => {
const selector = `:host ${ key }`;
let propStr = '';
for (let i = 0; i < value.length; i++) {
propStr += `${ value[i][0] }: ${ value[i][1] };\n`;
}
styleText += `${ selector} { ${ propStr } }\n`;
});
const styleElement = this._renderer.createElement('style');
this._renderer.appendChild(styleElement, this._renderer.createText(styleText));
this._renderer.appendChild(this._elementRef.nativeElement, styleElement);
}
}
对于如何实现这一点,angular文档有一个很好的入门指南 您需要有一个包含属性CSSStyleDeclaration的对象。i、 e
myStyle: CSSStyleDeclaration = { width: '100px', minHeight: '200px', backgroundColor: 'red' }
然后在组件中,您可以按照
<div [style]="myStyle"></div>
这允许您将样式直接传递到元素中
您可以选择的另一个选项是使用@HostBinding
,但这可能不太适合您正在尝试的操作
<div [style]="myStyle"></div>