TransferState:谁保证数据已经存储在状态中？

Question

我正在使用TransferState进行SSR,并想知道当我们这样做时谁保证

http.get(...).subscribe(data => {
  transferState.set(DATA_KEY, data)
})

数据将存储在transferState中？因为http.get是异步操作,并且可以生成内容并将其提供给没有此数据的客户端.

Answer 1

Angular Zone保证所有异步操作（zone.js跟踪的调用）在呈现之前完成。

让我们来看看

server.ts

app.get('*', (req, res) => {
  res.render('index', { req });
});   
                      ||
                      \/
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

我们可以看到所有常规路由都使用通用引擎来呈现html。

res.render方法（1）定义默认回调。所述ngExpressEngine函数返回与该回调另一个函数作为参数（2）通过。回调一旦触发，express便将结果发送给用户。

done = done || function (err, str) {
  if (err) return req.next(err);
  self.send(str);
};

现在让我们看看该回调何时被触发。如前所述，我们需要查看ngExpressEngine函数。

 getFactory(moduleOrFactory, compiler)
   .then(factory => {
       return renderModuleFactory(factory, {
          extraProviders
       });
    })
    .then((html: string) => {
      callback(null, html);
    }, (err) => {
      callback(err);
}); 

它只有在从renderModuleFactory函数返回的promise（3）被解析之后才会发生。

renderModuleFactory函数可以在 @ angular / platform-server中找到

export function renderModuleFactory<T>(
    moduleFactory: NgModuleFactory<T>,
    options: {document?: string, url?: string, extraProviders?: StaticProvider[]}):
    Promise<string> {
  const platform = _getPlatform(platformServer, options);
  return _render(platform, platform.bootstrapModuleFactory(moduleFactory));
}

您可以在上方看到我们实际上通过platform.bootstrapModuleFactory(moduleFactory)（4）运行了Angular应用程序

在_render function（5）内部，应用程序等待引导完成

return moduleRefPromise.then((moduleRef) => {

然后我们可以看到答案的关键：

return applicationRef.isStable.pipe((first((isStable: boolean) => isStable)))
        .toPromise()
        .then(() => {

您可以看到，可观察到的角度通用观察ApplicationRef.isStable可以知道何时完成渲染。简而言之，当区域未调度微任务时，将触发ApplicationRef上的isStable（7）：

if (!zone.hasPendingMicrotasks) {
  try {
    zone.runOutsideAngular(() => zone.onStable.emit(null));