在Angular 2+中呈现XML

Question

我一直在阅读与该问题类似的其他文章，但是我仍然无法在我的应用程序中正确呈现我的xml。

我已经使用以下工具来准备好我的xml：

  const parser = new DOMParser();
  const xml = parser.parseFromString(response, 'application/xml');
  this.questionSet = xml.documentElement;

  console.log(this.questionSet);

这就是控制台中的内容：

我现在如何在HTML中呈现它？

我目前正在尝试：

<div class="application-xml" innerHtml="{{questionSet}}"></div>

但是它只是打印：[对象元素]

任何帮助都会很棒，谢谢

Answer 1

角度安全性阻止HTML和其他脚本的动态呈现。您需要使用DOM Sanitizer绕过它们。

在此处了解更多信息：Angular Security

请在下面更改您的代码：

// in your component.ts file

//import this 
import { DomSanitizer } from '@angular/platform-browser';


// in constructor create object 

constructor( 
...
private sanitizer: DomSanitizer

...
){

}

someMethod(){

  const parser = new DOMParser();
  const xml = parser.parseFromString(response, 'application/xml');
  this.questionSet = xml.documentElement;
  console.log(this.questionSet);
  
 this.htmlData = this.sanitizer.bypassSecurityTrustHtml( this.questionSet); // this line bypasses angular scurity
 
 

}

 

<!-- In Your html file-->

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

这里是StackBlitz working Demo

Answer 2

尝试将innerHtml属性放在方括号<div class="application-xml" [innerHtml]="questionSet"></div>之间。