angular - 服务器端渲染不等待 API 调用完成

Question

您好，我正在使用 Angular 4.3 版，并且我已经实现了本文中提到的服务器端渲染。

https://medium.com/@cyrilletuzi/angular-server-side-rendering-in-node-with-express-universal-engine-dce21933ddce

当我点击服务器 url 以获取服务器端呈现的 HTML 时，组件的初始数据确实出现了，这些数据是静态的，不依赖于任何 API 调用。

但问题是渲染不包含完成 AJAX 请求后应该出现的数据。

我已经在组件的 ngOnInit 方法中编写了对 API 的调用。它调用一个服务，该服务调用 angular 的 http 服务的 get 方法来获取数据。Angular 通用渲染确实调用了这个函数。调用已发出但不等待响应返回。它而是返回初始数据。在服务器控制台一段时间后，我确实看到响应已经返回到服务器。但到那时，angular universal 已经回归了。

请帮助解决这个问题。

Answer 1

我知道这个问题已经存在一段时间了。这就是我们在 LastCall.cc 中找到解决方法的方式使用解析器(虽然性能不是很好)

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import {
  Resolve,
  RouterStateSnapshot,
  ActivatedRouteSnapshot
} from '@angular/router';
import { makeStateKey, TransferState } from '@angular/platform-browser';
import { SearchService } from '@app/services/search.service';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';

@Injectable()
export class ProductDetailsResolver implements Resolve<any> {
  private result: any;
  constructor(
    private readonly state: TransferState,
    private search: SearchService
  ) { }

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {
    const id = route.paramMap.get('dealId');
    const RESULT_KEY = makeStateKey<any>('product-details-resolver.result' + id);
    if (this.state.hasKey(RESULT_KEY)) {
      const res = of(this.state.get<any>(RESULT_KEY, null));
      this.state.remove(RESULT_KEY);
      return res;
    } else {
      this.state.onSerialize(RESULT_KEY, () => this.result);
      return this.search.searchDealById(id)
        .do(result => {
          this.result = result;
        }).catch((error) => {
          console.log('API Error --> ', error);
          this.result = {};
          return Observable.of({});
        });
    }
  }
}

上面的服务可以是任何异步数据 getter ，只要它返回一个 Observable

StateTransfer 握手将强制解析器等待 API 结果。问题是，没有超时，如果您的 API 有任何问题，对于最终用户来说，它似乎是挂起的。

以下是使用解析器实现路由的方法:

path: 'campaigns',
children: [
  {
    path: ':dealId',
    component: EcommerceProductDetails,
    resolve: { result: ProductDetailsResolver },
    runGuardsAndResolvers: 'paramsOrQueryParamsChange'
  }
]

下面是如何获取组件中的数据:

ngOnInit() {
  this.route.data.subscribe(data => {
    this.deal = <IDeal>data.result._source;
  });
}