如何驗證路由並在angular2中不需要時將其分開

Question

我必須在路由上添加驗證。當用戶嘗試從一個頁面重定向到另一個頁面時，我必須檢查是否存在未保存的更改。如果是，則顯示模式以確認重定向，否則用戶將保持在同一頁面上。

我試圖與canActivate一起使用，但只有當用戶加載應用程序時，纔會觸發內部路由。

我正在尋找一個集中的解決方案，因爲路由可以從控制器，視圖或href完成。

要做到這一點，我已經訂閱了router.events我可以捕獲所有路由事件。現在我只需想要一種方法來阻止路由並顯示模式，並保持跟蹤或上次路由，以便如果用戶單擊確定，那麼我可以繼續路由。

如果它是一個NavigationStart事件，那麼我必須根據條件打破路由。

請建議有沒有辦法做到這一點。

我必須檢查應用程序中發生的每個路由。

Answer 1

你必須把所有的路線置於警衛之下，所有的路線都是守衛的子路線。

並且還利用canDeactivate來檢查數據是否被保存。

{ path: 'guard', component: GuardsComponent , canDeactivate:[CanDeactivateGuard]}, 

可以停用

import { Injectable } from '@angular/core'; 
import { CanDeactivate } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 

export interface CanComponentDeactivate { 
    canDeactivate:() => Observable<boolean> | Promise<boolean> | boolean; 
} 

@Injectable() 
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> { 

    canDeactivate(component: CanComponentDeactivate) { 
    return component.canDeactivate ? component.canDeactivate() : true; 
    } 

}