Angular 5如何将字符串作为HTML元素插入

Question

我从服务器获得响应字符串:

<table><thead><tr> <th scope="col">Home</th> <th scope="col">Page </th> <th scope="col">World </th> <th scope="col">HE </th> <th scope="col">MAN</th> <th scope="col">GO</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>1</td><td>145</td><td>42</td></tr><tr><td>12</td><td>3125</td><td>315</td><td>2554</td><td>5542</td><td>331255</td></tr></tbody></table>

我怎么能直接在我的页面中插入这个html元素,以便我可以查看用户的html表.

我是新的角度下面是我尝试过的东西:

我在我的componentsnet类中创建了一个变量作为htmltable,并试图创建一个如下所示的htmlelemnt

this.htmltable = document.createElement(serverresponse.htmltable)

但它不起作用.

我也尝试过这种方式:

 <div class="dynamically_created_div unique_identifier" #d1></div>
    @ViewChild('d1') d1:ElementRef;
        this.renderer.appendChild(this.d1, serverresponse.htmltable);

但它不起作用.请建议我这样做的正确方法

Answer 1

您需要在将html显示在模板中之前对其进行清理.

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

@Component({
  selector: 'my-app',
  template: `
  <div [innerHtml]="safeHtml"></div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  safeHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(
      '<button>Click me</button>'
    )
  }
}

现场演示

Answer 2

您可以使用innerHtml指令。

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

在组件类中

theHtmlString=  '<table><thead><tr> <th scope="col">Home</th> <th scope="col">Page </th> <th scope="col">World </th> <th scope="col">HE </th> <th scope="col">MAN</th> <th scope="col">GO</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>1</td><td>145</td><td>42</td></tr><tr><td>12</td><td>3125</td><td>315</td><td>2554</td><td>5542</td><td>331255</td></tr></tbody></table>'; 

Answer 3

您可以按如下方式创建自定义角管：

import { DomSanitizer } from '@angular/platform-browser'
import { PipeTransform, Pipe } from "@angular/core";

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

在 HTML 组件中，

 <div [innerHTML]="comments | safeHtml"></div>