Добавление фрагмента HTML к представлению в Angular 6

Question

Я получаю html-код из http-запроса во внешнюю систему, и я должен показать это на моем виде в моем угловом приложении.

чтобы быть аккуратным, это 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 в представлении)

Answer 1

Можно ли обернуть этот скрипт в 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 как:

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

Я смог увидеть любой контент из этого div на пользовательском интерфейсе.

Даже угловая документация говорит то же самое.

Обходите безопасность и доверяйте заданному значению как безопасному HTML. Используйте это только тогда, когда связанный HTML-код небезопасен (например, содержит теги) и код должен быть выполнен. Дезинфицирующее средство оставит безопасный HTML без изменений, поэтому в большинстве случаев этот метод не следует использовать.

Answer 2

Вы можете попробовать использовать класс 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>') ;
  }