취소 경로 결정

Question

비동기 경로 해결을 종료하는 방법을 찾고 있습니다.

시나리오는 사용자가 구성 요소에 필요한 데이터를 가져 오는 링크를 클릭하는 것으로 사용자가 답을 얻거나 다른 링크를 클릭하는 경우입니다. 그런 다음 현재 해결을 취소하고 새 라우팅을 시작합니다.

기존 경로 (아직 해결 단계에 있음)가 처리되는 동안 경로 이벤트 구독이 실행되지 않으므로 이러한 변경 사항을 수신하여 라우팅을 가로 챌 수 없습니다.

const appRoutes: Routes = [ 
{ 
    path: 'resolvableRoute', 
    component: ResolvableRouteComponent, 
    resolve: { 
     data: RouteResolver 
    } 
}]; 

그리고 해결 :

예를 들어 내 라우터처럼 보일 수있는 방법이 HTTP 호출이 반환까지

@Injectable() 
export class RouteResolver implements Resolve<any> { 

    constructor(private http: HttpClient) {} 

    public resolve(router: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> { 
     return this.http.get('api/path/for/data'); 
    } 
} 

를, 라우터는 더 많거나 적게 붙어있다.

경로가 전환되는 동안 시작되는 멋진 로더가 있는데 해당 구성 요소에 필요한 데이터가있을 때까지 새로운 구성 요소를 표시하고 싶지는 않지만 요청을 종료 할 수 있어야합니다.

예를 들어 리졸버를 사용하지 않은 경우 사용자는 구성 요소가 데이터를 가져 오는 동안 (예 : 초기화) 구성 요소를 탐색하고 http 요청을 종료 할 수 있습니다. 이 방법으로 구성 요소를 처리하는 단점은 데이터를 가져 오는 처리 중에 빈 페이지 또는 불완전한 페이지를 표시해야한다는 것입니다.

Answer 1

나는이 해결책이 내가 필요로하는 것과 어쩌면 다른 누군가에게 도움이되는 것처럼 대답으로 게시 할 예정이다.

이 솔루션의 단점은 필자가 필요로하지 않는 라우터 용 래퍼가 필요하다는 것입니다.

이상적으로 라우터 탐색 대기열에 대한 구독을 만들었지 만 각도 라우터에서 모든 메소드/변수가 비공개이므로 액세스 할 방법이 없었습니다.

대신 나는 새로운 탐색 이벤트가 발생하는 경우 나 이벤트를 트리거 할 수있는 RouterService 생성 :

@Injectable() 
export class RouterService { 

    protected navigateListener = new EventEmitter<any>(); 

    constructor(private router: Router) {} 

    public subscribe(generatorOrNext?: any, error?: any, complete?: any) { 
     return this.navigateListener.subscribe(generatorOrNext, error, complete); 
    } 

    public navigate(commands: any[], extras?: NavigationExtras): Promise<boolean> { 
     this.navigateListener.next(); 
     return this.router.navigate(commands, extras); 
    } 

    public navigateByUrl(url: string | UrlTree, extras?: NavigationExtras): Promise<boolean> { 
     this.navigateListener.next(); 
     return this.router.navigateByUrl(url, extras); 
    } 

} 

그런 다음 내 해결의 내부 I (즉, 일반적으로 HTTP 요청을 반환하고 싶어) 관측을 만들어,하지만 또한 RouterService에서 이벤트 변경을 수신 대기 중입니다. 경로 안내가 방출되는 경우에, 나는

public resolve(router: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<any> { 
     return new Promise((resolve: any, reject: any) => { 
       const subscription = this.http.get('/path/to/some/url').subscribe((data) => { 
        resolve(data) 
       }, (error) => { 
        reject({ 
         ngNavigationCancelingError: true 
        }); 
       }); 

       this.router.subscribe(change => { 
        subscription.unsubscribe(); 
        reject({ 
         ngNavigationCancelingError: true 
        }); 
       }); 
     }); 
    }