将 HTML 片段附加到 Angular 6 中的视图 [英] Appending HTML snippet to the view in Angular 6

问题描述

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

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

<脚本类型='文本/javascript'src='https://test-www.payson.se/embedded/Content/payson.js?v2'>

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

我正在将 html 片段作为字符串获取到组件中，并希望将其附加到视图中(例如附加到视图中的 div)

解决方案

这个脚本可以包含在 div 中吗?

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

这样做之后，你会得到一个不安全的脚本错误，你可以通过将它传递给你可以像这样创建的消毒管道来修复它:

import {管道，管道变换来自'@angular/core';进口 {消毒剂，安全HTML来自'@angular/platform-b​​rowser';@管道({名称:'消毒'})导出类 SanitizePipe 实现 PipeTransform {构造函数(私有消毒剂:DomSanitizer){}变换(html:字符串):SafeHtml {返回 this.sanitizer.bypassSecurityTrustHtml(html);}}

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

并且在您的模板中，您可以简单地将 str 用作:

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

即使 Angular 文档 也是如此.

<块引用>

绕过安全性并相信给定的值是安全的 HTML.仅当绑定的 HTML 不安全(例如包含标签)并且应该执行代码时才使用它.sanitizer 将保持安全的 HTML 不变，因此在大多数情况下不应使用此方法.

I am getting a piece of html code from a http request to an external system , and I should show this on my view in my angular app

to be percise this is the html snippet that I have to show (it will be a bit different by every request and response )

<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>

I used different solution suggestions like innerHtml , but non of them is working for me (maybe because I have some script tag in my html code)

I am getting the html snippet as an string to a component and want to append it to the view (for example to a div in the view)

解决方案

Can this script be wrapped in a div?

If yes, then simply use the [innerHTML] property binding syntax on an empty div and use the str as it's value.

After doing that though, you're going to get an unsafe scripts error which you can fix by passing it through the sanitize pipe that you can create like this:

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

Creating a Pipe will help you reuse this logic at several places in your App.

And in your template, you can simply use the str as:

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

I was able to see any content from this div on the UI.

Even the Angular Documentation says the same.

Bypass security and trust the given value to be safe HTML. Only use this when the bound HTML is unsafe (e.g. contains tags) and the code should be executed. The sanitizer will leave safe HTML intact, so in most situations this method should not be used.

这篇关于将 HTML 片段附加到 Angular 6 中的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！