Javascript 使角度解析器等待图像

我可以做些什么使解析器等待，直到它从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（）
导出类DataResolverService实现解析{
建造师(
专用路由器：路由器，
私人API:ApiService
) {}
决心(
路由：ActivatedRouteSnapshot，
状态：RouterStateSnapshot
)：可观察的|可观察的{
返回此.API.getPostById（route.params.id）.pipe(
映射（响应=>{
如果（响应[“图像”]）{
常量图像=[]；
响应[“图像”]。forEach（图像=>{
this.API.getImageById（image.id）.subscribe(
（img:any）=>{
常量imageObject={
url:window.url.createObjectURL（img），
};
images.push（imageObject）；
}
);
});
响应[“图像”]=图像；
返回响应；
}
返回响应；
})
);
}
}

在异步方法“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;
      })
    );

在异步方法“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（）
导出类DataResolverService实现解析{
建造师(
专用路由器：路由器，
私人API:ApiService
) {}
决心(
路由：ActivatedRouteSnapshot，
状态：RouterStateSnapshot
)：可观察的|可观察的{
返回此.API.getPostById（route.params.id）.pipe(
switchMap（响应=>{//将其更改为switchMap
如果（响应[“图像”]）{
返回组合测试(
//合并对图像的所有请求
…响应[“images”].map（image=>this.API.getImageById（image.id）），
).烟斗(
map（images=>images.map（image=>（{url:window.url.createObjectURL（image）}）），
映射（images=>（{response:images}）），//此映射可能不必要
);
}否则{
归还（[]）；
}
})
);
}
}

这应该让你开始了。你的方法的问题是，你订阅的是内部可观察的，我不认为路由解析器正在等待它。

试试：

@Injectable（）
导出类DataResolverService实现解析{
建造师(
专用路由器：路由器，
私人API:ApiService
) {}
决心(
路由：ActivatedRouteSnapshot，
状态：RouterStateSnapshot
)：可观察的|可观察的{
返回此.API.getPostById（route.params.id）.pipe(
switchMap（响应=>{//将其更改为switchMap
如果（响应[“图像”]）{
返回组合测试(
//合并对图像的所有请求
…响应[“images”].map（image=>this.API.getImageById（image.id）），
).烟斗(
map（images=>images.map（image=>（{url:window.url.createObjectURL（image）}）），
映射（images=>（{response:images}）），//此映射可能不必要
);
}否则{
归还（[]）；
}
})
);
}
}

---

这应该让你开始了。你的方法的问题是，你订阅的是内部可观察对象，我不认为路由解析程序正在等待它。

看起来你已经嵌入了可观察对象；所以解析程序在第一个解析后解析。我怀疑你想返回内部可观察对象，而不是外部可观察对象。应该有一个rxjs操作符来处理这个问题。可能是MergeMap？你是对的。SwitchMap帮助我解决了这个问题。看起来你已经嵌入了Observable；所以在第一个解析后解析程序就会解析。我怀疑你想返回内部的Observable，而不是外部的Observable。t应该有一个rxjs操作符处理好这件事。可能是合并地图？你是对的。SwitchMap帮助我解决了这个问题。它像一个符咒一样工作。谢谢你的帮助。最后一个地图帮助我将图像附加到响应中。它像一个符咒一样工作。谢谢你的帮助。最后一个地图帮助我将图像附加到响应中。