Angular2 включить HTML с сервера в div - PullRequest
Новая
       26

Angular2 включить HTML с сервера в div

1 голос
/ 11 июня 2019

Я получил серию html на моем сервере.Например:

И я пытаюсь включить эти файлы в <div> в моем приложении angular2 v4.Например:

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 Загрузить внешнюю HTML-страницу в div

Динамически загрузить шаблон HTML в angular2

но это не работает для меня.Может кто-нибудь помочь мне с этой проблемой, пожалуйста?

Ответы [ 5 ]

4 голосов
/ 14 июня 2019

Угловая защита Блокирует динамический рендеринг HTML и других скриптов. Вам нужно обойти их, используя DOM Sanitizer.

Подробнее здесь: Угловая защита

НЕ СЛЕДУЕТ вносить изменения в ваш код: 

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

0 голосов
/ 14 июня 2019

вы должны получить HTTP-вызов для загрузки HTML в виде простого текста и загрузки в div с помощью innerHtml. 

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

Иногда вы можете столкнуться с проблемой CORS в стеке при загрузке внешнего HTML

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

0 голосов
/ 12 июня 2019

Это должно сделать это:

Сначала в вашем component.ts получите html с запросом http: 

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>
0 голосов
/ 14 июня 2019

В вашем компоненте страницы первого запроса с 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>
0 голосов
/ 11 июня 2019

Вы действительно хотите отобразить страницу внутри вашего углового приложения, верно?

Для этого вы можете добавить тег iframe: 

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