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将使用“提交”功能。作为它的默认值。单击按钮时导致表单提交。

在使用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，一切都很顺利。