发表新帖
发表新帖

Render CSS for innerHtml using angular2

前端 未结
关注
3 895
走了就别回头了
走了就别回头了 2021-01-12 14:39

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

Template string example:
相关标签:
3条回答
  • 忘了有多久
    2021-01-12 15:04

    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

    0 讨论(0)
  • 半阙折子戏
    2021-01-12 15:05

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

}
    0 讨论(0)
  • 抹茶落季
    2021-01-12 15:08

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题