时间戳

首页 > 解决方案 > Angular 9：更改参数时如何防止重新加载页面

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

问题描述

我使用了 angular9 和 PathLocationStrategy

{提供：LocationStrategy，useClass：PathLocationStrategy}，

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

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

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

更新代码

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();
    }

标签： angularangular-routingangular-router

解决方案

因为您使用的是本机表单提交，所以浏览器将重新加载页面。您需要在角度内处理表单提交以防止这种行为。

  <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()这会导致您的页面重新加载。

推荐阅读