更新时间:2022-10-19 11:41:12
您可能正在单击事件中调用 router.navigate
函数.
保存功能类似于
save() {//做东西this._router.navigate(['/users', { id: userId } ]);}
这适用于 IE11 和 Edge 浏览器,但会在 Chrome 中重新加载应用程序.
这是因为按钮元素中缺少 type
,如果按钮位于 内,Chrome 将使用提交"因为它是默认值.点击按钮时导致表单提交.
在使用 button
元素时,***总是设置 type
参见此处:
因此将 HTML 更改为
将使其适用于所有 3 个浏览器.
我之前的解决方案也有效,(通过返回 false 会阻止默认操作.也就是提交表单)但我认为上面的解决方案是首选.
过时的答案,但为后代保留:
This is how the routes and component look like:
routes.config
export const routes: RouterConfig = [
{ path: 'users', component: UsersComponent, canActivate: [AuthGuard] },
{ path: 'users/new', component: NewUserComponent },
];
new-user.component
addField(newName: string){
this.items.push({
name: newName,
})
this._router.navigate(['/users'])
Is Angular2 supposed to refresh the page on router.navigate?
What else to use instead of router.navigate to avoid any page refresh?
Here is the proof:
You are probably calling the router.navigate
function inside a click event.
<button class="btn btn-default"
(click)="save()">Save</button>
And the save function being something like
save() {
//Do stuff
this._router.navigate(['/users', { id: userId } ]);
}
This works on IE11 and Edge browsers, but would reload the application in Chrome.
This is because of a missing type
in the button element, if the button is inside a <form></form>
Chrome will use 'submit' as it's default value. Causing a form submit when the button is clicked.
It's preferred to always set a type
when using the button
element
See here:
So changing the HTML to
<button class="btn btn-default" type="button"
(click)="save()">Save</button>
Will make it work on all 3 browsers.
My previous solution also works, (By returning false it would prevent the default action. a.k.a. submitting the form) but I think the above one is preferred.
Obsolete answer but kept for posterity:
<button class="btn btn-default" (click)="save(); false">Save</button>