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

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

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

数据将存储在传输状态下？

---

因为http.get是异步操作，可以生成内容并提供给客户端，而无需此数据。

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）定义。 该函数返回作为参数（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

函数返回的承诺（3）得到解决后，才会发生这种情况

renderModuleFactory

功能可在以下位置找到：

然后我们可以看到答案：

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

您可以看到，angular universal查看observable以了解何时完成渲染。简单地说，isStable on ApplicationRef在以下情况下触发（7）：

---

哇，老兄。对于这样一个详细的答案，我想增加额外的赏金！

return moduleRefPromise.then((moduleRef) => {

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

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