Resolver가 예상대로 작동하지 않습니다.

Question

리졸버를 만들었지 만 리졸버가 끝나면 모든 구성 요소가로드되지만 리졸버 기능이 완료되기 전에 구성 요소가로드되는 경우가 있습니다.

해결 프로그램 코드는 다음과 같습니다

는

import { Injectable } from '@angular/core'; 
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import { ApiService } from '../services'; 
import { AppState } from 'spotlightcloud-angular-common-website'; 
import { Locale } from '../locale/locale'; 

@Injectable() 
export class MetricsLocaleResolver implements Resolve<any> { 
    constructor(public api: ApiService, public appState: AppState, private locale: Locale) { 
    } 

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any { 
    return this.api.get('monitoring', 'uiconfiguration/metricsmetadata', {}).subscribe(
     localeData => { 
     console.log('localeData: ', localeData); 
     this.locale.setMetricsLocaleObj(localeData); 
     } 
    ); 
    } 
} 

localeData 인쇄는 때때로 (onChanges 수명주기) 구성 요소에서 인쇄 한 후에 나타납니다.

Answer 1

변경

return this.api.get('monitoring', 'uiconfiguration/metricsmetadata', {}).subscribe(

return this.api.get('monitoring', 'uiconfiguration/metricsmetadata', {}).map(

전화 할 경우

에 .subscribe() 당신은 Subscription가, 라우터가 대신 Observable, Promise, 또는 boolean 값을 기대하고 돌아갑니다.

콜백은 또한`MetricsLocaleResolver` 인스턴스에`resolve`를 호출 무엇 부울 값

localeData => { 
    console.log("localeData:",localeData); 
    this.locale.setMetricsLocaleObj(localeData); 
    return true; 
    }