라우트가 해결되기 전에 각 2 개의 구성 요소가로드됩니다.

Question

getReport 서비스가 데이터를 반환하기 전에 구성 요소의 ngOninit에 충돌이 발생합니다. 서비스가 해결 될 때까지 기다리지 않습니다.

라우팅 :

@Injectable() 
class ReportResolver implements Resolve<any> { 
constructor(private reportsService: ReportsService) { 
} 
resolve(
    route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
): any { 
    this.reportsService.GetReport(route.params["id"]).subscribe((data: any) => { 
     return data; 
    }); 
}} 

const appRoutes: Routes = [ 
{ 
    path: "reports/:id", 
    component: TabularReportsFachadeComponent, 
    resolve: { report: ReportResolver } 
}, 
{ 
    path: "", 
    component: DashboardComponent 
},]; 

서비스 :

GetReport(id: any): Observable<any> { 
    return this._http.get("api/reports/?" + id).map(res => res.json()); 
} 

구성 요소 다음 getReport

Answer 1

전에 타격을 받고있다 ngOninit

ngOnInit(): void { 
    debugger 
    this.report = this.route.snapshot.data["report"].data; 

} 

구성 요소은 Subscription이 아니라 Observable을 반환해야합니다. 실제로 resolve은 아무 것도 반환하지 않지만 에 subscribe()을 호출하면 Subscription을 반환하므로 전화하지 않아야합니다.

반환하기 전에 값을 처리해야하는 경우 map((val) => ...) 또는 다른 연산자를 대신 사용하십시오.

resolve(
    route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
): any { 
    return this.reportsService.GetReport(route.params["id"]) 
}}