Angular2 router.navigate刷新頁面

Question

這是路由和組件的外觀：

route.config

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

新用戶組件

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

Angular2是否應該刷新 router.navigate上的頁面？

還有什么可以代替 router.navigate來避免刷新頁面？

這是證明：

Answer 1

您可能在click事件中調用了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 。 請參見此處：

因此將HTML更改為

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

將使其在所有3種瀏覽器上均可使用。

我以前的解決方案也可以（通過返回false可以阻止默認操作。也稱為提交表單），但是我認為上述方法是首選。

過時的答案，但為后代保留：

 <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混合情況。 我要添加答案，因為當您在Google角路由器頁面重新加載問題時，此問題是最重要的結果之一。 希望它將節省其他人的時間。

在我的情況下，我有一個非常簡單的Angular 2（實際上是5）路由配置，除了一種情況下（從一種路由到另一種路由的鏈接會莫名其妙地導致頁面重新加載），大多數情況下都有效。 我已經檢查了所有常見的嫌疑犯，表格，提交按鈕等。

原來，在單擊鏈接時顯示的AngularJS組件中的某個地方，有一個ng-include 。 該文檔警告此是出於我猜想的原因。 重新調整模板，以便可以將ng-include更改為templateUrl ，一切都很好。