Question

我正在尝试使用innerHTML和我从SQL获得的html + css字符串来呈现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>

现在它渲染HTML很好，但看起来它会删除样式标记，只是在其中呈现文本。

渲染示例：

HTML渲染部分：

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

Home.component.ts部分：

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

我已尝试使用封装：ViewEncapsulation.Emulated / None等，尝试了内联CSS，我尝试附加：host＆gt;＆gt;＆gt;面前的p标签。它们都呈现相同。

有什么建议吗？

Answer 1

将它与 DomSanitizer with bypassSecurityTrustHtml 和SafeHtml一起使用，如下所示，

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

}

Answer 2

注入<?php $prod_cat = $_POST['cat_val']; $sql = "SELECT subcat_name FROM subcategories WHERE cat_name = '$prod_cat'"; $result = mysqli_query($conn, $sql); $msg =''; if (mysqli_num_rows($result) > 0){ while ($row = mysqli_fetch_array($result)) { $msg =.'<option value="'. $row["sub_cat_name"] .'">'. $row["sub_cat_name"] .'</option>'; } } else{$msg .="No categories were found!";} echo $msg; mysqli_close($conn); ?>并将Sanitizer应用于https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html中所示的HTML内容，以使Angular2知道您信任该内容。

另见In RC.1 some styles can't be added using binding syntax

Answer 3

我没有任何管道，只是将DomSanitizer和SafeHtml注入我的组件并在我的标记字符串上运行bypassSecurityTrustHtml。这使我可以防止我的内联样式被解析出来。

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

和foo.component.html模板

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

使用angular2为innerHtml渲染CSS

3 个答案: