Routing을 확인하고 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; 
    } 

}