Render CSS for innerHtml using angular2

问题

I am trying to render a HTML template using innerHTML and a html + css string I get from SQL.

Template string example:

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Template Name</title><style type="text/css"> p{ color:red; }</style> </head> <body> <h1>#headding#</h1> <p style="color:red;">#paragraph#</p><a href="#url#">#urltext#</a> </body> </html>

Now it renders the HTML fine but it looks like it drops the style tags and just renders the text inside of it.

Example of render:

HTML render part:

<div [innerHtml]="templateBody">
</div>

Home.component.ts parts:

@Component({
    selector: "home",
    templateUrl: `client/modules/home/home.component.html`,
    encapsulation: ViewEncapsulation.Emulated
})
export class HomeComponent implements OnInit{
    templateBody: string;
.....other code
}

I have tried it with encapsulation: ViewEncapsulation.Emulated/None etc, tried inline CSS and I tried appending the :host >>> infront of the p tag. They all render the same.

Any suggestions?

回答1:

Use it with DomSanitizer with bypassSecurityTrustHtml and SafeHtml as shown below,

DEMO : https://plnkr.co/edit/eBlzrIyAl0Il1snu6WJB?p=preview

import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    console.log(this.sanitized.bypassSecurityTrustHtml(value))
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

@Component({
  selector: 'my-app',
  template: `

      <div  [innerHtml]="html | safeHtml"></div>
  `,
})
export class App {
  name:string;
  html: safeHtml;
  constructor() {
    this.name = 'Angular2'
    this.html = `<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Template Name</title><style type="text/css"> p{ color:red; }</style> </head> <body> <h1>#headding#</h1> <p style="color:red;">#paragraph#</p><a href="#url#">#urltext#</a> </body> </html>`;
  }

}

回答2:

Inject the Sanitizer and apply bypassSecurityTrustHtml(value: string) : SafeHtml to the HTML content as demonstrated in https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html to make Angular2 aware that you trust the content.

See also In RC.1 some styles can't be added using binding syntax

回答3:

I did it without any pipes and just by injecting DomSanitizer and SafeHtml into my component and running bypassSecurityTrustHtml on my markup string. This allowed me to keep my inline styles from being parsed out.

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
    selector: "foo",
    templateUrl: "./foo.component.html"
})

export class FooComponent { 
    html: SafeHtml;
    constructor(private sanitizer: DomSanitizer) {
        this.html = this.sanitizer.bypassSecurityTrustHtml('<span style="color:##0077dd">this works</span>');
    }
}

and in foo.component.html template

<div [innerHtml]="html"></div>

来源：https://stackoverflow.com/questions/39959273/render-css-for-innerhtml-using-angular2

标签

angular

innerhtml