Angular2将来自服务器的html包含到一个div中答案

【问题标题】：Angular2 include html from server into a divAngular2将来自服务器的html包含到一个div中
【发布时间】：2019-10-26 07:17:12
【问题描述】：

我的服务器中有一系列 html。例如：

我试图将这些文件包含在我的 angular2 v4 应用程序中的 a<div> 中。例如：

组件.ts

public changePage(name: string) {
  switch (name) {
    case 'intro': this.myHtmlTemplate = 'http://docs.example.com/intro.html'; break;
    case 'page1': this.myHtmlTemplate = 'http://docs.example.com/page1.html'; break;
    case 'page2': this.myHtmlTemplate = 'http://docs.example.com/page2.html'; break;
  }
}

component.html

<div [innerHtml]="myHtmlTemplate"></div>

但它不起作用。我尝试了以下解决方案：

Angular4 Load external html page in a div

Dynamically load HTML template in angular2

但这对我不起作用。有人可以帮我解决这个问题吗？

【问题讨论】：

这不是你应该如何做的。看concretepage.com/angular-2/…
谢谢@msanford 但我正在寻找一种解决方案，其中 html 模板与 Angular 应用程序位于不同的服务器上，并且只能通过链接导入。 html模板必须独立于angular中的应用程序。

标签： html angular typescript html-templates

【解决方案1】：

Angular 安全性阻止 HTML 和其他脚本的动态呈现。您需要使用 DOM Sanitizer 绕过它们。

在这里阅读更多：Angular Security

在您的代码中进行以下更改：

// in your component.ts file

//import this 
import { DomSanitizer } from '@angular/platform-browser';


// in constructor create object 

constructor( 
...
private sanitizer: DomSanitizer

...
){

}

someMethod(){

  const headers = new HttpHeaders({
  'Content-Type':  'text/plain',
});
const request = this.http.get<string>('https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form', {
  headers: headers,
  responseType: 'text'
}).subscribe(res => this.htmlString = res);

 this.htmlData = this.sanitizer.bypassSecurityTrustHtml(this.htmlString); // this line bypasses angular security

}

在 HTML 文件中；

<!-- In Your html file-->
    <div [innerHtml]="htmlData">
    </div>

这是您要求的工作示例：

Working Stackblitz Demo

【讨论】：

我喜欢你的解决方案。不幸的是，它不适用于所有 .html 文件。即使在 stackblitz 演示中，也会返回控制台错误。如果您有任何其他方式的解决方案（iframe 除外），我想知道。谢谢
@SergioMendez 那是因为网站没有发送 html 响应（可能是由于跨源请求）。如果您有返回 html 内容的网站列表。上述解决方案肯定会奏效。
非常感谢。你真的帮我找到了解决方案。

【解决方案2】：

应该这样做：

首先在您的 component.ts 中通过 http 请求获取 html：

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  constructor(private http: HttpClient) { }

  htmlString: string;

  ngOnInit() {
    const headers = new HttpHeaders({
      'Content-Type':  'text/plain',
    });
    const request = this.http.get<string>('https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form', {
      headers: headers,
      responseType: 'text'
    }).subscribe(res => this.htmlString = res);
  }

}

并且在您的 component.html 中只需使用单向数据绑定：

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

【讨论】：

当然我试过了。然后“responseType: 'text'”返回以下错误：Type '"text"' is not assignable to type '"json"'.ts(2322) client.d.ts(639, 9): 预期的类型来了来自在类型 ... 上声明的属性“responseType”
你必须设置 "responseType: 'text' as 'json'" 来欺骗打字稿转译器

【解决方案3】：

你真的想在你的 Angular 应用中显示一个页面，对吧？

为此，您可以添加iframe 标签：

<iframe width="400" height="600" [src]="myHtmlTemplate"></iframe>

【讨论】：

非常感谢，我避免使用因为我在 angular App 中有一些样式，我需要从服务器出现在 template.html 中。我需要的是一种方法去<a href="/default/index/tourl?u=aHR0cDovL2RvY3MuZXhhbXBsZS5jb20vcGFnZTIuaHRtbA%3D%3D" rel="nofollow" target="_blank">docs.example.com/page2.html</a> 并实际上将该文件转换为纯文本以使用 [innerHtml] 放置，以便角度样式适用于本节

【解决方案4】：

您必须获得 HTTP 调用才能以纯文本形式加载 HTML 并使用 innerHtml 加载到 div 中。

export class AppComponent implements OnInit {
name = 'Kissht';
KisshtHtml;
constructor(
 private http:HttpClient,
 private sanitizer:DomSanitizer){ }
ngOnInit(){
   this.http.get('https://kissht.com/', 
  {responseType:'text'}).subscribe(res=>{
    this.KisshtHtml = this.sanitizer.bypassSecurityTrustHtml(res);
  })
 }
}

有时您可能会在加载外部 Html 时在 stackblitz 中遇到 CORS 问题

https://stackblitz.com/edit/display-external-html-into-angular

【讨论】：

【解决方案5】：

在您的组件第一个请求页面中使用 HTTP 请求

this.http.get('http://docs.example.com/intro.html').map(response => response.text()).subscribe(html => Your_template = html);

将 innerhtml 与 safehtml 管道一起使用，以便应用您的内联样式 GitHub页面上的更多信息（https://gist.github.com/klihelp/4dcac910124409fa7bd20f230818c8d1）

<div [innerHtml]="Your_template | safeHtml"></div>

【讨论】：