在新窗口中打开 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 并让登录表单正常工作？

提前致谢。

---

#更新

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

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

Answer 1

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

下面是代码sn-p供大家参考：

使用以下代码创建管道：

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>