Angular2 router.navigateリロードアプリ

Question

私は私のアプリで定義されている次のルートを持っている...

app.components.ts 
@RouteConfig([ 
    {path:'/employees/...', name:'Employees', component:EmployeeComponent}, 
    ... 

employee.component.ts 
@RouteConfig([ 
    {path:'/', name:'EmployeeList', component:EmployeeListComponent, useAsDefault: true}, 
    {path:'/:id', name:'EmployeeDetail', component:EmployeeDetailComponent} 
]) 

ときI EmployeeDetailComponentテンプレートからのルート...に

<button class="btn btn-default" [routerLink]="['EmployeeList']">Close</button> 

アプリの路線期待どおりの社員リストページ。 I router.navigateを使用してルート...

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

// EmployeeDetailComponent 
saveEmployee() { 
    this._employeeServer.updateEmployee(this.employee); 
    this._router.navigate(['EmployeeList']); 
} 

アプリルート従業員がリスト（予想通り）、その後、しばらく後に、アプリのリロードが完全に（期待できないとして、しかし

、 ）。

router.navigateがrouterLinkと異なる動作をする理由は何ですか？私は何が欠けていますか？

あなたは、このディレクティブを使用でき

Answer 1

：

@Directive({ 
    selector: `click-stop-propagation` 
    events: 'stopClick($event)' 
}) 
class ClickStopPropagation { 
    stopClick(event:Event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    } 
} 

をし、それをこのように適用されます。

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

別の解決策は、saveメソッドにイベントを渡すために、次のようになります。

<button class="btn btn-default" 
    (click)="save($event)" click-stop-propagation>Save</button> 

イベントの伝達を停止するために使用します。

save(event) { 
    this._employeeServer.updateEmployee(this.employee); 
    this._router.navigate(['EmployeeList']); 
    event.preventDefault(); 
    event.stopPropagation(); 
} 

Answer 2

イベントの伝播をキャンセルしたThierryの答えが私のために働いていましたが、別の解決策が見つかりました。

を使用すると、クリックイベントを含めたよりも、この滑らかな印象は、議論のためにアップしている見つけるかどうかは

... 
setTimeout(() => { 
    this._router.navigate(['EmployeeList']); 
}, 0); 
... 

（任意の期間の）タイムアウトでナビゲーションをラップ試してみてください。私にとっては、アニメーションを待つようにナビゲーションを延期したいと思っていました。この方法では、余計なクリックイベントが含まれなくなりました。

Answer 3

<button><form>が送信を試みている可能性があります。ボタンをクリックしたときに投稿が行われないように、<button type="button">を追加してみてください。