将post post请求加载到angular2中的iframe中

Question

我有一个web服务,它生成带有HTML电子邮件内联CSS的HTML,以响应以下URL的POST请求:https://civinky.3sd.io/generate

我在这里构建了一个简单的angular2应用程序http://civinky-demo.3sd.io/,这样人们就可以看到将要生成的HTML.这个想法是你在左侧添加参数并点击按钮.Angular发出一个帖子请求并在右侧显示结果.iframe中生成的HTML的预览以及下面div中的原始html.

这是服务:

import { Injectable } from '@angular/core';
import { Http, URLSearchParams }          from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class CivinkyService {

  url ="https://civinky.3sd.io/generate"

  constructor(private http: Http, private elementRef: ElementRef) { }

  query(pug, css, json) {
    let params = new URLSearchParams()
    params.append('pug', pug)
    params.append('css', css)
    params.append('json', json)
    let body = params.toString()
    let result = this.http.post(this.url, body)
      .map(res => {return {url:res.url,html:res.text().trim()}})
    return result;
  }
}

我正在查询我的组件

import { Component, OnInit } from '@angular/core';
import { Observable }       from 'rxjs/Observable';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { CivinkyService } from '../civinky.service';


@Component({
  selector: 'app-civinky',
  templateUrl: 'civinky.component.html',
  styleUrls: ['civinky.component.css'],
  providers: [CivinkyService]
  // encapsulation: ViewEncapsulation.None,

})
export class CivinkyComponent implements OnInit {


  url: SafeResourceUrl

  urlString: string

  html: string

  pug: string = `some pug`

  css: string = `some css`

  json: string = `some json`

  constructor(
    private civinky: CivinkyService,
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit() {
    this.queryCivinky()
  }

  queryCivinky() {
    this.civinky.query(this.pug, this.css, this.json).subscribe(
      result => {
        this.html = result.html
        this.url = this.url = this.sanitizer.bypassSecurityTrustResourceUrl(result.url)
      }
    )
  }
}

Revelant模板的片段

<iframe [attr.src]="url"></iframe> <!-- preview -->
<textarea [(ngModel)]="html" readonly></textarea> <!-- raw -->

我无法解决的问题是在iframe中预览它.我很乐意要求iframe发布请求或将{{html}}作为iframe的内容注入,但我无法解决如何做到这一点.

angular2应用程序源位于:https://github.com/3sd/civinky-demo

帮助赞赏:)

Answer 1

你可以使用srcdoc,SafeHtml和bypassSecurityTrustHtml

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
...

export class CivinkyComponent implements OnInit {    
  htmlSrc: SafeHtml 
  html: string
  ...
}

queryCivinky() {
   this.civinky.query(this.pug, this.css, this.json).subscribe(
      result => {
        this.htmlSrc = this.sanitizer.bypassSecurityTrustHtml(result.html)
        this.html = result.html
      }
   )
}

而对于iframe:

<iframe [srcdoc]="htmlSrc"></iframe>

信用:https://stackoverflow.com/a/38852423/1544886

Answer 2

您可以使用平台浏览器模块中的DomSanitizer

import {DomSanitizer} from '@angular/platform-browser';

通过在构造函数中初始化它来在组件中注入DomSanitizer

  constructor(private domSanitizer: DomSanitizer)

使用DomSanitizer的bypassSecurityTrustHtml()并传递从http响应中收到的原始html ::

this.displayString= this.domSanitizer.bypassSecurityTrustHtml("<div>html text received from api</div>");

在你的HTML中使用它像这样:

 <iframe [srcdoc]="displayString"></iframe>

我希望这能解决你的问题.