Angular 9：更改参数时如何防止重新加载页面

Question

我使用了 angular9 和 PathLocationStrategy

{provide: LocationStrategy, useClass: PathLocationStrategy},

我的问题是：
当我使用 form.submit() 将数据发布到后端时，后端将使用一些参数（例如：'/contacts?data=new'）重定向到当前 URL。
我的网站将被重新加载。
我不想重新加载页面。我使用了参数订阅，但不起作用

this.route.queryParams.subscribe(params => { this.urlParams = 参数； });

在这种情况下如何防止重新加载页面？

更新代码

HTML：

<form [formGroup]="submitForm" novalidate [id]="submitFormId" method="post" isolate-form>
    <input type="text"/>
    <input type="hidden" name="Reference" [value]="data.reference">
    <input type="hidden" name="Action" [value]="data.action">
    <button class="btn" (click)="save()">Save</button>
</form>

TS：

public save() {
        let $form = $('#submitFormId');
        $form.attr('action', this.data.crnUrl);
        $form.submit();
    }

Answer 1

因为你使用的是原生表单提交，浏览器会重新加载页面。您需要在 Angular 内处理表单提交以防止这种行为。

  <form [formGroup]="submitForm" novalidate [id]="submitFormId" isolate-form (ngSubmit)="save()">
    <input type="text"/>
    <input type="hidden" name="Reference" [value]="data.reference">
    <input type="hidden" name="Action" [value]="data.action">
    <button class="btn" type="submit">Save</button>
</form>

然后在您的组件中使用HttpClient自己发送请求

  constructor(private http: HttpClient) {}

  public save() {
        let body = {}
        // Get form fields here using FormGroup, and put them into body
        this.http.post(this.data.crnUrl, body)
    }

另外，不要将 JQuery 与 angular 一起使用，因为 $form.submit() 会导致您的页面重新加载。