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

Question

我使用了angular9和PathLocationStrategy

{provide:LocationStrategy，useClass:PathLocationStrategy}，

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

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

因为您使用的是原生表单submit，浏览器将重新加载页面。您需要在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()是导致页面重新加载的原因。