将 HTML 片段附加到 Angular 6 中的视图

我从对外部系统的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）

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

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

不过，完成此操作后，您将收到一个不安全的脚本错误，您可以通过将其传递到您可以像这样创建的清理管道来修复该错误：

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

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

在您的模板中，您可以简单地使用str as:

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

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

即便是角度文档说同样的。

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