Angular 5 将动态 html 文件添加到 DIV

Question

Angular 5 将动态 html 文件添加到 DIV

我对 Angular 很陌生，我试图将 html 文件作为我的字符串插入并插入到 DIV 元素中

我有我的search.component.html电话

<div #ID></div>

Run Code Online (Sandbox Code Playgroud)

组件.ts

import { Component} from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent {
  constructor() {}

  let ServerResponseHtml = '<div><input type="text"/><input type="text"/><span class="btn btn-outline-primary btn-sm" (click)="open(content)">View Document</span></div>';

  document.getElementById("DIV").innerHTML = ServerResponseHtml;
}

Run Code Online (Sandbox Code Playgroud)

我从服务器获取响应作为完整的 html 标记，我只需要附加到我的 DOM 中并显示内容，标记也可以具有内联样式。

我试过了，<div [innerHTML]="ServerResponseHtml"></div> and <div innerHTML="{{ServerResponseHtml}}"></div>但这不是显示为 html，而是显示为文本。

Answer 1

Ume*_*a D 8

我们需要使用safehtml来显示 html。

我们需要为此创建管道。 safe-html-pipe.ts

    import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
    import {Pipe, PipeTransform} from '@angular/core';
    
    @Pipe({name: 'safehtml'})
    
    export class SafeHtmlPipe implements PipeTransform {
      constructor(private sanitized: DomSanitizer) {
      }
    
      transform(value): SafeHtml {
        return this.sanitized.bypassSecurityTrustHtml(value);
      }
    }

Run Code Online (Sandbox Code Playgroud)

component.ts 我们需要导入管道

从“@angular/core”导入 {Component, NgModule, Pipe, PipeTransform}

import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser'
import { SafeHtmlPipe } from './safe-html-pipe';
@Component({
selector: 'app-root',
template: 
    `<div [innerHtml]="safeHtmlContent | safehtml">
 </div>"})`
 
export class AppComponent {
 name:string;
  safeHtmlContent : string;
  constructor() {
    this.name = 'Angular2'
    this.safeHtmlContent  = '<html><head><title>Hello safe</title></head><body><h1>hello world Hello Umesh</h1></body></html>';
  }
}

Run Code Online (Sandbox Code Playgroud)

希望这可以帮助：）。

归档时间：	7 年，10 月前
查看次数：	9728 次
最近记录：	5 年，1 月前