Question

我正在使用JSON中的beehance API加载一些内容，它有一些文本和样式信息，使其看起来像在编辑器中配置的那样。

JSON中包含的文本有html标签，我用[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>元素吗？我尝试在模板中使用样式标签，但我不知道如何在那里进行插值。

样式元数据不起作用，因为样式是动态获取的，并且根据项目的不同而不同。

我想要的是这样的：

@Component({
  template: `
    <style>
    .paragraph {
      {{styles.paragraph}}
    }
    </style>
    `
})

但插值不起作用，有没有办法做这样的事情？

Answer 1

我找到了这个解决方案（它主要是黑客，但它确实有效）：

<强> 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 /应用程序/ style1.css.ts

export const style1 = `
  body {
    background: red;
  }
`;

<强>的src /应用程序/ style2.css.ts

export const style2 = `
  body {
    background: blue;
  }
`;

<强>的src /应用程序/应用程序/ 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;
    }
  }
}

Answer 2

您可以直接向元素添加动态样式

{
  text: '<div class="sub-title">Lorem ipsum</div>  <div class="paragraph" [ngStyle]="styles.paragraph">dolor sit amet</div>',
  ...
}

但目前无法在样式本身中使用绑定。

Angular2动态样式表元素

2 个答案: