在 Angular 中,observables 是异步的,它们不会等待其数据到达。在服务器端使用 Angular Universal 时,有时需要等待 observable 的数据到达,然后再渲染 HTML 页面。
为了解决这个问题,可以使用 RxJS 中的 toPromise
方法将 observable 转换为 promise,并在服务器端等待 promise 成功完成。例如,以下代码显示了如何等待 HTTP 请求获取数据,并在服务器端渲染页面。
import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', template: '
constructor(private http: HttpClient) { this.data = this.http.get('/api/data').toPromise(); } }
在这个例子中,data
是一个 Promise,http.get
方法返回一个 observable,该 observable 使用 toPromise
方法转换为 Promise。这将导致服务器端等待 HTTP 请求完成并返回结果,然后在客户端上呈现数据。
总的来说,使用 toPromise
方法将 observables 转换为 promise 是一个很好的 Angular Universal 的解决方案。
上一篇:AngularUNIVERSALprerendererrorMethodPromise.prototype.thencalledonincompatiblereceiver[objectObject]