我如何在 Angular 10 应用程序中等待 rxjs/fromEvent() 的结果

Question

Currently, I'm developing a document parser based on the DOM in Angular 10. In the first step I need to load all images because their dimensions are required.

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, footer, 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;
}

The problem is that fromEvent returns an observable and I can't find a way to access the value. But this value is required in generateDocx() . So, how can I load the images to get their dimensions and process only after images are loaded?

Answer 1

I'll try to explain what you could do based on our conversation in the comment section.

I assume you have component which creates a document upon user's request. Let's call it DocCreateComponent and it has a createDocument(someData) method. This component calls some function / service which eventually calls generateDocx and createDoc as you mentioned in your question. To visualize our call stack it would look like following

http.get (@createDoc)
createDoc (@generateDocx)
generateDocx (@someFunc)
.
.
.
createDocument (@DocCreateComponent)

I'd make createDocument within DocCreateComponent subscribe to outer most Observable and everyone else between would NEVER subscribe. They would just use operators to manipulate/add some logic on the data. If you subscribe to an Observable , you get Subscription object which is not useful to anyone else. Keep in mind, your middle guys ( services / functions ) should return Observable (for most of the time, there could be some exceptions).