Angular2 将 html 从服务器包含到 div

Question

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

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

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

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

Answer 1

您真的想在 angular 应用程序中显示一个页面吗？

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

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

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

Answer 3

在您的组件中，首先使用 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>

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

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

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

Answer 5

Angular security 阻止 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

Angular2 将 html 从服务器包含到 div

Angular2 include html from server into a div

html

typescript

angular

html-templates