如何解决如何在Angular 10应用中等待rxjs / fromEvent的结果
当前,我正在基于Angular 10中的DOM开发文档解析器。第一步,由于需要其尺寸,因此我需要加载所有图像。
createDoc(header: ElementRef,footer: ElementRef,content: ElementRef): Observable<any> {
const docParts = () => from([header,footer,content]);
const request = (url: string) =>
this.http.get(url,{ responseType: 'blob' }).pipe(
map(response => {
let img = new Image();
img.src = url;
return fromEvent(img,'load').pipe(
map(event => {
let loadedImage: any = event.currentTarget;
return {
buffer: response,width: loadedImage.width,height: loadedImage.height,};
})
);
}),tap(response => {
console.log('--- Image:',url,response);
this.imageList[url] = response;
})
);
return from([header,content]).pipe(
delay(100),switchMap(response => forkJoin(this.getImages(response).map(url => request(url)))),switchMap(docParts),concatMap((elem: any) => {
return of(this.generateDocx(elem));
}),toArray(),map(response => {
...
return response;
})
);
}
generateDocx(node:ElementRef): string[] {
...
// apply values from "imageList"
...
return result;
}
问题是fromEvent
返回一个可观察值,但我找不到访问该值的方法。但是generateDocx()
中需要此值。那么,如何仅在加载图像后才能加载图像以获取尺寸和进行处理?
解决方法
我将根据评论部分中的对话来解释您可以做什么。
我假定您具有根据用户请求创建文档的组件。我们称之为DocCreateComponent
,它有一个createDocument(someData)
方法。该组件调用一些function
/ service
,最终会调用generateDocx
和createDoc
,正如您在问题中提到的那样。为了可视化我们的调用堆栈,它看起来像下面的
http.get (@createDoc)
createDoc (@generateDocx)
generateDocx (@someFunc)
.
.
.
createDocument (@DocCreateComponent)
我会让createDocument
中的DocCreateComponent
订阅最外部的Observable
,而介于此之间的其他所有人将从不订阅。他们只会使用operators
来对数据进行操作/添加一些逻辑。如果您订阅Observable
,则会得到Subscription
对象,该对象对其他人没有用。请记住,您的中间人(services
/ functions
)应该返回Observable
(在大多数情况下,可能会有一些例外)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。