7

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

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

组件.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模板

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

4

5 回答 5

11

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

在此处阅读更多信息：Angular 安全性

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

// 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 演示

于 2019-06-14T06:13:06.093 回答
1

这应该这样做：

首先在您的 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>
于 2019-06-11T21:13:39.260 回答
0

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

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

<iframe width="400" height="600" [src]="myHtmlTemplate"></iframe>
于 2019-06-11T20:26:58.840 回答
0

在带有 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>
于 2019-06-14T05:50:24.157 回答
0

您必须获得 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

于 2019-06-14T05:56:20.190 回答