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

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

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

Angular2将HTML从服务器包含到div中

5 个答案: