Question

我有一个网络服务，使用内联CSS为HTML电子邮件生成HTML，以响应以下网址的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)
      }
    )
  }
}

重复使用模板片段

<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

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

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

通过在构造函数中初始化

，在组件中注入DomSanitizer

  constructor(private domSanitizer: DomSanitizer)

使用DomSanitizer的bypassSecurityTrustHtml（）并传递从http response ::

收到的原始html

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

在你的html中使用它：

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

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

Answer 2

您可以使用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

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

2 个答案: