我该怎么做才能让解析器等到它从API获得图像。现在,Angular等待数据接收,显示页面,然后尝试获取帖子的图像。
@Injectable()
export class DataResolverService implements Resolve<any> {
constructor(
private router: Router,
private API: ApiService
) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any> | Observable<never> {
return this.API.getPostById(route.params.id).pipe(
map(response => {
if (response["images"]) {
const images = [];
response["images"].forEach(image => {
this.API.getImageById(image.id).subscribe(
(img: any) => {
const imageObject = {
url: window.URL.createObjectURL(img),
};
images.push(imageObject);
}
);
});
response["images"] = images;
return response;
}
return response;
})
);
}
}
尝试:
@Injectable()
export class DataResolverService implements Resolve<any> {
constructor(
private router: Router,
private API: ApiService
) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any> | Observable<never> {
return this.API.getPostById(route.params.id).pipe(
switchMap(response => { // change this into a switchMap
if (response["images"]) {
return combineLatest(
// combine all of the request for the images
...response["images"].map(image => this.API.getImageById(image.id)),
).pipe(
map(images => images.map(image => ({ url: window.URL.createObjectURL(image) })),
map(images => ({ response: images })), // This map may be unnecessary
);
} else {
return of([]);
}
})
);
}
}
这应该会让你开始。你的方法的问题是,你订阅了内部可观察到的,我不认为路由解析器在等待它
在异步方法"this.neneneba API.getImageById(image.id("解析之前返回"响应"。必须等待所有异步迭代结束后才能返回。有一些选项可以做到这一点,这是选项:
return this.API.getPostById(route.params.id).pipe(
map(async response => {
if (response["images"]) {
const images = [];
response["images"].forEach(image => {
await this.API.getImageById(image.id).then(
(img: any) => {
const imageObject = {
url: window.URL.createObjectURL(img),
};
images.push(imageObject);
}
);
});
response["images"] = images;
return response;
}
return response;
})
);