Angular 2如何以POST方式在新窗口打开带参数的URL

Hey there! I get exactly why you're hitting that NotFound page—window.open() uses GET by default, which doesn't play nice when the endpoint expects POST parameters. Let's fix this by dynamically creating a hidden form that submits via POST to your target URL in a new window. Here's how to update your handleDepositSuccessPopup method:

protected handleDepositSuccessPopup(depositEvent: SuccessfulDepositPopup, redirectParams: string): void {
  // Create a temporary hidden form element
  const postForm = document.createElement('form');
  postForm.method = 'POST';
  postForm.action = depositEvent.url;
  postForm.target = '_blank'; // Ensures the form submits to a new window/tab

  // Convert each parameter from the API response into a hidden input field
  depositEvent.params.forEach(param => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = param["key"];
    input.value = param["value"];
    postForm.appendChild(input);
  });

  // Add the form to the DOM temporarily and submit it
  document.body.appendChild(postForm);
  postForm.submit();

  // Clean up the form after submission to avoid cluttering the DOM
  setTimeout(() => {
    document.body.removeChild(postForm);
  }, 100);

  // Keep your existing navigation logic intact
  this.router.navigate(
    ["deposit", this.route.snapshot.data["instrumentTypeCode"], "deposit-details", depositEvent.id],
    { relativeTo: this.route.parent.parent }
  );
}

How this works: #

• We're leveraging HTML form submission (which supports POST) instead of window.open(). The target="_blank" attribute ensures the form submits to a new window, matching your original desired behavior.
• Each parameter from depositEvent.params is converted into a hidden input field, so they're sent as POST body data instead of being appended to the URL (which would be GET behavior).
• We clean up the temporary form after submission to avoid leaving unused elements in your DOM.

Quick notes to keep in mind: #

• Make sure depositEvent.url is a valid endpoint that accepts POST requests with the parameters you're sending.
• Most browsers won't block this popup if it's triggered as part of a user-initiated action (like a button click), which aligns with your flow since this runs after a submit action. If you do run into popup blockers, you might need to add a user-facing prompt to allow popups for your site.

内容的提问来源于stack exchange，提问作者ralphcarlo