通过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配置文件,并且它不允许我编写这样的配置。
请参考以下答案: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>