Angular Create Style Tag in View Template?

问题

I want to create a generic html fragment component. The idea being we may store html fragments in a db somewhere, and styles that should be applied to them.

I can easily set the innerHtml to insert the html structure into a base element in my view template, but how do i dynamically insert a <style> tag in my view template?

Here's what I have:

 @Component({
    moduleId: module.id,
    selector: 'htmlFragment',
    styleUrls: ['html-fragment.css'],
    templateUrl:'html-fragment.html'
})

export class HtmlFragmentComponent {

    @Input() htmlContent: string;
    @Input() styleContent: string;
}

Here is the view template:

<style [innerHTML]="styleContent"></style>
<div [innerHTML]="htmlContent"></div>

Then I'm trying to use it like this:

 <htmlFragment [htmlContent]='dHtml' [styleContent]="sHtml"></htmlFragment>

Where:

dHtml: string = '<div>hello this is html<ul><li>bla bla</li><li>bla bla 2</li></ul></div>';
    sHtml: string = 'ul{list-style-type: none;}';

The html fragment is properly injected in here:

<div [innerHTML]="htmlContent"></div>

However the style element here:

 <style [innerHTML]="styleContent"></style>

isn't working right. Is there a way to do this?

回答1:

It cannot be done in the template itself (Angular template compiler does not allow it, and will just remove any <style> tag), but it can be done programmatically within the component:

ngOnInit() {
  const css = 'a {color: pink;}';
  const head = document.getElementsByTagName('head')[0];
  const style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));
  head.appendChild(style);
}

回答2:

By default, Angular will gobble <style> elements and put them into the default Angular CSS pipeline. You can bypass this by:

@Component({
  template: `<div [innerHTML]="styles"></div>`
})
export class OutputStyleTagComponent implements OnInit {
  public styles: SafeHtml;

  constructor(
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit() {
    this.styles = this.sanitizer.bypassSecurityTrustHtml(`
      <style>
       .my-styles {
         ...
       }
      </style>
    `);
  }
}

It has drawbacks, like requiring the wrapping div container. You also must ensure you don't allow user submitted content in this tag because it opens you up to XSS attacks. If you must, then you need to ensure the content is safe before passing it into bypassSecurityTrustHtml.

回答3:

style element is supposed to be in the HEAD.

You can apply style from string to html element using [attr.style]

  @Component({
    selector: 'my-app',
    template: `
      <div>
        <h2 [attr.style]="style">Hello {{name}}</h2>
      </div>
    `,
  })
  export class App {
    style;
    myStyleStr = 'color:blue';

    name:string;
    constructor(private sanitizer: DomSanitizer) {
      this.name = `Angular! v${VERSION.full}`;
      this.style = sanitizer.bypassSecurityTrustStyle(this.myStyleStr);
    }
  }

来源：https://stackoverflow.com/questions/43988535/angular-create-style-tag-in-view-template

标签

angular

angular2-template