Angular 5将动态HTML文件添加到DIV中

Question

Angular 5将动态HTML文件添加到DIV中

4

我是一个新手，想要学习Angular。我正在尝试将HTML文件作为我的字符串插入到DIV元素中。

我有一个名为search.component.html的文件。

<div #ID></div>

components.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;
}

我从服务器得到了完整的 HTML 标记作为响应，只需将其附加到我的 DOM 中并显示内容，这些标记可能还带有内联样式。

我尝试使用<div [innerHTML]="ServerResponseHtml"></div>和 <div innerHTML="{{ServerResponseHtml}}"></div>，但是它们不会以 HTML 的形式显示，而是以文本形式显示。

- Umesha D

我认为你在全局范围内没有以正确的方式进行操作。你应该使用动态变量和可能的显示条件，在模板中编写你的结果div。 - Adrien Brunelat

你能检查一下这个链接吗？https://dev59.com/FVcP5IYBdhLWcg3w5d0l - swaroop pallapothu

等一下，你只是想把服务器上的.html文件内容插入到客户端吗？ - Adrien Brunelat

是的，我想插入子元素 elements，作为文本格式，我们可以使用变量 {{dynamic}}。我需要在我的页面中呈现它们。 - Umesha D

@swarooppallapothu 这个代码对于原问题中提到的 (click) 事件有效吗？ - Pranjal Successena

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Umesha D · Accepted Answer

我们需要使用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);
      }
    }

component.ts 我们需要导入管道

import {Component, NgModule, Pipe, PipeTransform} from '@angular/core'

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

希望这有所帮助 :)。