Angular2 dynamic stylesheet element

问题

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.

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>',
  ...
}

and the styles are something like

"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"
}

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.

What I want is something like this:

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

But the interpolation doesn't work, is there a way to do something like that?

回答1:

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;
    }
  }
}

回答2:

You can add dynamic styles directly to the elements

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

but there is currently no way to using bindings in styles itself.

Related issues

https://github.com/angular/angular/issues/2567
https://github.com/angular/angular/issues/6274
https://github.com/angular/angular/issues/10093

来源：https://stackoverflow.com/questions/38404537/angular2-dynamic-stylesheet-element

标签

javascript

css

angular

angular2-template