javascript - 防止当前选项卡在 Angular 中加载 html 表单操作 URL

Question

我正在使用 Angular，但需要将表单帖子发送到新选项卡中的外部 URL，而无需使用表单操作 URL 重新加载当前选项卡。

我环顾四周，发现如何使用帖子动态创建表单，并在新选项卡中打开它，但它也会使用表单操作 URL 重新加载我的 Angular 应用程序。

这是我的 .ts 代码，它是一个名为 handleNavigateToExternal() 的函数的一部分：

const url = 'https://xxxx.com/sso_servlet_in';
let params = { sender: 'xxxx', SAMLResponse: samlResponse, return_url: 'http://localhost:4200/home' };
let mapForm = document.createElement('form');
mapForm.target = '_blank';
mapForm.method = 'POST';
mapForm.action = url;

Object.keys(params).forEach(function(param) {
  var mapInput = document.createElement('input');
  mapInput.type = 'hidden';
  mapInput.name = param;
  mapInput.setAttribute('value', params[param]);
  mapForm.appendChild(mapInput);
});
document.body.appendChild(mapForm);
mapForm.submit();

这是html：

<a *ngIf="isEnabled" [class]="menuLinks.get('ebpp')?.menuLinkClass"
  [title]="menuLinks.get('ebpp')?.title"
  (click)="menuLinks.get('ebpp')?.isAuth && handleNavigateToExternal()">
  EBPP
</a>

我尝试过使用 setTimeout，但因为它重定向到外部页面，所以运行时没有更改。我也试过只使用 Angular HTTPClient，但它给了我一个 CORS 错误，我无法控制服务器。

标签： javascripthtmlangularforms