2

我从 http 请求到外部系统中获取了一段 html 代码，我应该在我的角度应用程序的视图中显示它

准确地说，这是我必须展示的 html 片段（每个请求和响应都会有所不同）

<div 
  id='paysonContainer'
  url='https://test-www.payson.se/embedded/checkout?id=af1ebee5-40bd-410a-90d1-a94401553414'>
</div>

<script 
  type='text/javascript' 
  src='https://test-www.payson.se/embedded/Content/payson.js?v2'>
</script>

我使用了不同的解决方案建议，例如 innerHtml ，但没有一个对我有用（可能是因为我的 html 代码中有一些脚本标签）

我将 html 片段作为字符串添加到组件中，并希望将其附加到视图（例如视图中的 div）

4

2 回答 2

2

这个脚本可以包装在一个div中吗？

如果是，那么只需[innerHTML]在空上使用属性绑定语法div并使用它str作为它的值。

但是，在这样做之后，您将收到一个不安全的脚本错误，您可以通过将其传递给您可以像这样创建的 sanitize 管道来修复它：

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

@Pipe({
  name: 'sanitize'
})
export class SanitizePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(html: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

创建管道将帮助您在应用程序的多个位置重用此逻辑。

在您的模板中，您可以简单地使用stras：

<div [innerHTML]="str | sanitize">
</div>

我能够在 UI 上看到此 div 中的任何内容。

在此处输入图像描述

甚至Angular 文档也这么说。

绕过安全性并相信给定的值是安全的 HTML。仅当绑定的 HTML 不安全（例如包含标签）并且应该执行代码时才使用它。消毒剂将保持安全的 HTML 完好无损，因此在大多数情况下不应使用此方法。

于 2018-08-23T07:57:46.583 回答
0

您可以尝试使用 DOMSanitizer 类

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

constructor(private sanitizer: DomSanitizer) {
    this.html = sanitizer.bypassSecurityTrustHtml('<div 
  id='paysonContainer'
  url='https://test-www.payson.se/embedded/checkout?id=af1ebee5-40bd-410a-90d1-a94401553414'>
</div>') ;
  }
于 2018-08-23T07:57:36.287 回答