Angular2 router.navigate刷新页面

发布时间：2020-12-17 07:06:17 所属栏目：安全来源：网络整理

导读：这是路由和组件的样子： routes.config export const routes: RouterConfig = [ { path: 'users',component: UsersComponent,canActivate: [AuthGuard] },{ path: 'users/new',component: NewUserComponent },]; new-user.component addField(newName: strin

这是路由和组件的样子：

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'])

Angular2应该刷新router.navigate上的页面吗？

还有什么可以使用而不是router.navigate来避免任何页面刷新？

这是证明：

enter image description here

解决方法

您可能在click事件中调用router.navigate函数.

<button class="btn btn-default"
    (click)="save()">Save</button>

而保存功能就像是

save() {
    //Do stuff
    this._router.navigate(['/users',{ id: userId } ]);
}

这适用于IE11和Edge浏览器,但会在Chrome中重新加载应用程序.

这是因为如果按钮位于< form>< / form>内,则按钮元素中缺少类型. Chrome会使用“提交”作为默认值.单击按钮时导致表单提交.

在使用按钮元素时始终设置类型是首选
See here:

所以将HTML更改为

<button class="btn btn-default" type="button"
        (click)="save()">Save</button>

将使它适用于所有3个浏览器.

我以前的解决方案也有效,(通过返回false会阻止默认操作.a.k.a.提交表单)但我认为上面的解决方案是首选.

Obsolete answer but kept for posterity:

06003

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!