如何从 Angular 7 上的 URL 加载文本/html答案

【问题标题】：How to load an text/html from an URL on Angular 7如何从 Angular 7 上的 URL 加载文本/html
【发布时间】：2019-05-08 00:53:12
【问题描述】：

我正在使用 Angular 7。我想调用一个返回 HTML 的 URL（基本上从站点呈现地图）。

通过下面的程序，我可以访问外部服务器 URL (http://localhost:3344/webappbuilder/apps/8) 并生成一个 blob（返回文本/html）。

我想操作 blob 并将其放在 div 上以地图的形式显示 html。

我可以知道如何操作 blob 并将结果 (HTML) 呈现为 Angular 7 上的地图。

也请告诉我：

如何在我的 Angular 页面 (Angular 7) 上加载外部 HTML 文件 (http://localhost:3344/webappbuilder/apps/8/index.html)？

【问题讨论】：

In RC.1 some styles can't be added using binding syntax的可能重复
您可以尝试导入类似 Cheerio 的内容，为您提供一个 API，用于将原始 html 添加到变量中并使用类似 jquery 的语法来操作“dom”。然后你需要通过 Angular 的 sanitizer 运行它以绕过安全性，这样你就可以将它注入到模板上的 div 中。

标签： angular url angular7

【解决方案1】：

您应该能够将获得的值绑定到 div 的 [innerHTML] 中。

在组件代码中，需要将文本转成字符串：

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

然后，您可以绑定现有组件的 innerHTML。

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

在此处查找 StackBlitz 示例：https://stackblitz.com/edit/angular-xcr1jk

【讨论】：

【解决方案2】：

您可以使用 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 和样式等的参考。

参考：In RC.1 some styles can't be added using binding syntax

【讨论】：