在新窗口中打开HTML纯文本或者

Question

通过get命中API端点后，我得到一个完整的HTML页面代码。这是出于身份验证的目的，我从端点获取的HTML是用户需要填写以进行身份​​验证的社交网络登录表单。

this.http
    .get('api/endpoint/html', { responseType: 'text' })
    .pipe(map((html: string) => {
      const popup = window.open('', 'Page', `toolbar=no,location=no ...`);

      popup.document.open();
      popup.document.write(html);
    }));

页面似乎工作，它显示页面，表单应该发布一个帖子并返回先前配置的“登录后URL”与一些参数，但当我填写我的凭据时，会抛出一个错误。

Cannot POST /my/redirect/after/login/url

我猜测是因为我首先通过执行document.write（html）来加载弹出窗口。

有没有办法在弹出窗口中加载我从API调用中获得的HTML并获得登录表单？

提前致谢。

---

#UPDATE

感谢this post，我想我知道发生了什么。现在，接受的答案表明必须完成webpack配置，如何为Angular7应用程序进行此类配置？

因为在创建项目时我只有一个angular.json文件来保存所有webpack配置文件，并且它不允许我编写这样的配置。

Answer 1

请参考以下答案：How to transfer HTML-String from component.ts to component.html

以下是供您参考的代码段：

使用以下代码创建管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';


@Pipe({ name: 'keepHtml', pure: false })
export class SafePipe implements PipeTransform {
constructor(private _sanitizer: DomSanitizer) {
}

public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
    case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
    case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
    case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
    case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
    case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
    default:
        throw new Error(`Unable to bypass security for invalid type: ${type}`);
}
}
}

并在html文件中使用以下代码行：

<div [innerHtml]="htmlBody | keepHtml: 'html'"></div>