Angular2 router.navigate 刷新页面答案

【问题标题】：Angular2 router.navigate refresh pageAngular2 router.navigate 刷新页面
【发布时间】：2016-06-30 10:41:30
【问题描述】：

这是路由和组件的样子：

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 以避免任何页面刷新？

证明如下：

【问题讨论】：

不，不是。你能在 Plunker 中复制吗？ angular.io/resources/live-examples/quickstart/ts/plnkr.html
可能不会，如果它不应该那样做，但我会尝试。
至少我们可以调查完整的代码并检查是否有问题。
请原谅我的无知，但我找不到任何安装了 RC3 路由器的 plunker，而且我以前从未做过 plunker。你有一个我可以编辑的吗？
这就是我的第一条评论中的链接应该有帮助的 ;-)

标签： angular angular2-routing

【解决方案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 将使用“提交”作为默认值。单击按钮时导致表单提交。

使用button 元素时，最好始终设置type See here:

所以把 HTML 改成

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

将使其适用于所有 3 种浏览器。

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

过时的答案，但留给后代：
<button class="btn btn-default"
        (click)="save(); false">Save</button>

【讨论】：

刷新结束！！但我不能确切地说出“假”在做什么，以及它将来可能会导致什么问题。我会在一段时间内对其进行更多测试。谢谢！
@Cris 我用更好的解决方案和更多解释更新了我的答案。
两种解决方案都可以正常工作，但您建议的那个更有意义。所以如果我理解得很好，底线是......永远不要在 SPA 中使用button type="submit"？ :-D
美丽的解释！谢谢！我今天整天都在与这个问题作斗争，直到我看到这个。
非常感谢。我尝试使用 event.preventDefault() 修复它，但这个解决方案要好得多。

【解决方案2】：

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

【讨论】：

[routerLink] 确实有效，在我的情况下，我有逻辑要在导航之前执行，所以 [routerLink] 不是一个选项。

【解决方案3】：

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

window.open('users', '_self');

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

【讨论】：

【解决方案4】：

对我来说效果很好（来自组件代码）：

window.location.href = "/sth";

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

【讨论】：

【解决方案5】：

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

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

事实证明，在点击链接时显示的 AngularJS 组件的某处，有一个ng-include。文档对此提出警告，我猜是有原因的。重新调整了模板，所以ng-include 可以更改为templateUrl，一切都很好。

【讨论】：