angular - Angular Universal App 正在通过出色的微/宏任务渲染服务器端

Question

由于第 3 方库，我正在请求 SaaS api。当有未完成/未完成的服务调用时，服务器完成渲染 Angular 通用应用程序。

---

我正在使用 Angular 5.2.0 和它的 SSR 功能。这是我的设置的抽象结构：

服务器.ts

/* ... */
renderModuleFactory(AppServerModuleNgFactory, {
  document: template,
  url: options.req.url,
  extraProviders: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}).then(html => {
  console.log('--- HTML DATA FETCHED ---');
});
/* ... */

我的.component.html

<div *ngIf="data$ | async as responseData">
  Data is available
</div>

我的.component.ts

export class MyComponent implements OnInit {
  public data$: Observable<any>;
  @Input() serviceKey: string;

  constructor(private serviceWrapper: ServiceWrapper) { }

  ngOnInit() {
    this.data$ = this.serviceWrapper.get(this.serviceKey);
  }
}

服务包装器.service.ts

export class ServiceWrapper {
  private thirdPartyClient: ThirdPartyClient;
  constructor(private _zone: NgZone) {
    /* ...initialize thirdPartyClient... */
  }
  get(serviceKey: string): Observable<any> {

    console.log(serviceKey + ' is stable: ' + this._zone.isStable);
    console.log(serviceKey + ' outstanding macrotasks: ' + this._zone.hasPendingMacrotasks);
    console.log(serviceKey + ' outstanding microtasks: ' + this._zone.hasPendingMicrotasks);

    return new Observable<any>(subscriber => {
      this.thirdPartyClient.getFromRemote(serviceKey).then(response => {
        subscriber.next(response);
        subscriber.complete();
      });
    });
  }
}

app.component.html

<app-my-component service-key="keyA"> </app-my-component>
<app-my-component service-key="keyB"> </app-my-component>
<app-my-component service-key="keyC"> </app-my-component>
<app-my-component service-key="keyD"> </app-my-component>
<app-my-component service-key="keyE"> </app-my-component>

输出

keyA is stable: false
keyA outstanding macrotasks: false
keyA outstanding microtasks: false
keyB is stable: false
keyB outstanding macrotasks: true
keyB outstanding microtasks: true
keyC is stable: false
keyC outstanding macrotasks: true
keyC outstanding microtasks: true
keyD is stable: false
keyD outstanding macrotasks: true
keyD outstanding microtasks: true
--- HTML DATA FETCHED ---
keyE is stable: false
keyE outstanding macrotasks: false
keyE outstanding microtasks: true

---