使 Angular 解析器等待图像
Make Angular resolver wait for images
我该怎么做才能让解析器等到它从 API 获取图像。现在,Angular 等到收到数据,显示页面,然后尝试获取 post.
的图像
@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;
})
);
}
}
您在异步方法 "this.API.getImageById(image.id)" 解析之前返回 "response"。您必须等待所有异步迭代结束才能返回。有一些选项可以做到这一点,这是选项:
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;
})
);
尝试:
@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([]);
}
})
);
}
}
这应该可以帮助您入门。您的方法的问题是您订阅了内部可观察对象,我认为路由解析器没有在等待它。
我该怎么做才能让解析器等到它从 API 获取图像。现在,Angular 等到收到数据,显示页面,然后尝试获取 post.
的图像@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;
})
);
}
}
您在异步方法 "this.API.getImageById(image.id)" 解析之前返回 "response"。您必须等待所有异步迭代结束才能返回。有一些选项可以做到这一点,这是选项:
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;
})
);
尝试:
@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([]);
}
})
);
}
}
这应该可以帮助您入门。您的方法的问题是您订阅了内部可观察对象,我认为路由解析器没有在等待它。