Angular2 动态样式表元素 [英] Angular2 dynamic stylesheet element
问题描述
我正在从 JSON 格式的 beehance API 加载一些内容，其中包含一些文本和样式信息，使其看起来与在编辑器中配置的一样.
I'm loading some content from the beehance API in JSON, which has some text and the style info to make it look as it was configured in the editor.
JSON 中包含的文本具有 html 标签，我将其添加为 [innerHTML]
the text contained in the JSON has html tags and I add it with [innerHTML]
{
text: '<div class="sub-title">Lorem ipsum</div> <div class="paragraph">dolor sit amet</div>',
...
}
和样式类似
"paragraph": {
"color": "#3B3B3B",
"font_family": "arial,helvetica,sans-serif",
"font_size": "12px",
"line_height": "1.4em",
"text_align": "left"
},
"subtitle": {
"color": "#000000",
"font_family": "arial,helvetica,sans-serif",
"font_size": "14px",
"line_height": "1.6em",
"text_align": "right"
}
那么是否有一种 Angular2 方式可以将一些生成的 css 附加到 <style> 元素?
我尝试在模板中使用样式标签，但我不知道如何在那里插入.
so is there an Angular2 way I can append some generated css to a <style> element?
I tried with a style tag inside the template but I don't know how to interpolate there.
样式元数据不起作用，因为样式是动态获取的，并且它们因项目而异.
The style metadata doesn't work because the styles are dynamically fetched and they vary depending on the project.
我想要的是这样的:
@Component({
template: `
<style>
.paragraph {
{{styles.paragraph}}
}
</style>
`
})
但是插值不起作用，有没有办法做这样的事情?
But the interpolation doesn't work, is there a way to do something like that?
推荐答案
我找到了这个解决方案(主要是 hack，但它有效):
I found this solution (it is mostly the hack, but it works):
src/index.html
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.png">
</head>
<body>
<style id="theme_styles"></style>
<app-root></app-root>
</body>
</html>
src/app/style1.css.ts
export const style1 = `
body {
background: red;
}
`;
src/app/style2.css.ts
export const style2 = `
body {
background: blue;
}
`;
src/app/app/component.ts
import { Component } from '@angular/core';
import { style1 } from './style1.css';
import { style2 } from './style2.css';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
private themeElement: Element = document.getElementById('theme_styles');
private isStyle1: boolean = false;
constructor() {
this.themeElement.innerHTML = style1;
}
ngOnInit() {
if (this.isStyle1) {
this.themeElement.innerHTML = style1;
} else {
this.themeElement.innerHTML = style2;
}
}
}
这篇关于Angular2 动态样式表元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
