Как загрузить текст / HTML из URL на Angular 7

Question

Я использую Angular 7. Я хочу вызвать URL, который возвращает HTML (который в основном отображает карту с сайта).

С помощью приведенной ниже программы я могу нажать URL-адрес внешнего сервера (http://localhost:3344/webappbuilder/apps/8)), и он генерирует BLOB-объект (возвращающий text / html).

Я хочу манипулироватьblob и поместите его в div, чтобы отобразить HTML в форме карты.

Могу ли я узнать, как я могу манипулировать BLOB-объектом и отображать результаты (HTML) в виде карты на Angular 7.

а также дайте мне знать:

Как загрузить внешний HTML-файл (http://localhost:3344/webappbuilder/apps/8/index.html) на мою угловую страницу (Angular 7)?

Answer 1

Вы можете добавить его с помощью innerHTML

<div [innerHTML]="htmlTemplate"></div>

Но если вы делаете это, вам необходимо выполнить санитарную обработку.

DomSanitizer помогает предотвращать ошибки безопасности межсайтовых сценариев (XSS) путемдезинфекция значений для безопасного использования в различных контекстах DOM.

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

@Pipe({name: 'safeHtml'})
export class SafeHtml implements PipeTransform {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustStyle(html);
  }
}

Примерно так:

<div [innerHTML]="htmlTemplate | safeHtml"></div>

Ниже вы можете получить дополнительную ссылку о санации HTML, стилей и т. д..

см .: В RC.1 некоторые стили не могут быть добавлены с использованием синтаксиса привязки

Answer 2

Вы должны иметь возможность связать полученное значение в [innerHTML] элемента div.

В коде компонента вам необходимо получить текст в строку:

htmlTemplate = '<h1>Test Html</h1>';

Затем вы можете связать innerHTML существующего компонента.

<div [innerHTML]="htmlTemplate"></div>

Найдите пример StackBlitz здесь: https://stackblitz.com/edit/angular-xcr1jk