Angular2將來自服務器的html包含到一個div中

Question

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

• http://docs.example.com/intro.html

• http://docs.example.com/page1.html

• http://docs.example.com/page2.html

我試圖將這些文件包含在我的 angular2 v4 應用程序中的<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;
  }
}

組件.html

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

但它不起作用。 我嘗試了以下解決方案：

Angular4在div中加載外部html頁面

在angular2中動態加載HTML模板

但這對我不起作用。 有人可以幫我解決這個問題嗎？

Answer 1

角度安全性阻止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>

這是您的要求的工作示例：

工作Stackblitz演示

Answer 2

您實際上想在您的角度應用程序中顯示頁面嗎？

為此，您可以添加一個iframe代碼：

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

Answer 3

應該這樣做：

首先在您的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 4

在組件中的帶有HTTP請求的第一個請求頁面

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

在safehtml管道中使用innerhtml，以便將內聯樣式應用於GitHub頁面上的更多信息（ https://gist.github.com/klihelp/4dcac910124409fa7bd20f230818c8d1 ）

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

Answer 5

您必須獲得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

Answer 6

你好，我和你有同樣的工作，我使用https://stackblitz.com/edit/display-external-html-into-angular的解決方案我有同樣的問題，我使用 ifram 我有身高問題。 你有沒有從你的網站 URl 轉到 textto 在 [innerHtml] 中顯示它