Angular2 router.navigate刷新页面

Question

这是路由和组件的样子：

routes.config

export const routes: RouterConfig = [
   { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },   
   { path: 'users/new', component: NewUserComponent },    
];

新user.component

 addField(newName: string){
        this.items.push({ 
          name: newName,
      })
      this._router.navigate(['/users'])

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

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

这是证据：

Answer 1

您可能在单击事件中调用router.navigate函数。

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

而保存功能就像是

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

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

这是因为按钮元素中缺少type，如果按钮位于<form></form>内，Chrome将使用'submit'作为默认值。单击按钮时导致表单提交。

当使用type元素时，总是设置button See here:

所以将HTML更改为

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

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

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

过时的答案，但为后代保留：

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

Answer 2

使用简单的<a href="/details/1"></a>链接，我有相同的效果（导航到详细信息页面时页面刷新）。解决方案是使用角度链接：<a [routerLink]="['/details', 1]"></a>

Answer 3

对我来说很好（从组件代码）：

window.location.href = "/sth";

它会自动将页面重新加载到给定的url部分。

Answer 4

我知道它的简单方法，但您也可以设置此代码在所有操作完成后刷新成功事件的路由。

window.open（'users'，'_ self'）;

它将重新加载并重定向到用户页面。

Answer 5

这涵盖了AngularJS / Angular混合情况。我正在添加答案，因为这个问题是谷歌角度路由器页面重新加载问题时的最佳结果之一。希望它能节省别人的时间。

在我的情况下，我有一个非常简单的Angular 2（实际上是5）路由配置，除了一个从一个路由到另一个路由的链接将莫名其妙地导致页面重新加载的情况之外，其中大多数工作。我检查了所有常见的嫌疑人，表格，提交按钮等。

事实证明，在点击链接时显示的AngularJS组件中的某个位置，有一个ng-include。文档警告我这是有原因的。改组模板，以便ng-include可以改为templateUrl，一切都很顺利。