Question

如何正确使用此模块https://github.com/angular/universal/tree/master/modules/common/src/state-transfer-initializer

在删除文档DOMContentLoaded并使用此模块后，状态传输在浏览器中停止工作。使用此模块的正确方法是什么？

P.S。已在@ nguniversal / common @ 7.1.0版本PR https://github.com/angular/universal/commit/0e38dd1

中修复

Answer 1

如果DOMContentLoaded事件已经触发并且在添加了侦听器之后   对于DOMContentLoaded事件，将不会执行。

我们可以通过以下检查来检查是否已装入文档。
if (doc.readyState === "complete" || doc.readyState === "interactive") {
    // document is ready
}
如果DOMContentLoaded没有被触发，那么我们可以听。
function handler() {
    // After DOMContentLoaded
}
document.addEventListener('DOMContentLoaded', handler);

因此，如果resolve()已被解雇，我们需要DOMContentLoaded作出保证。我修改了 Angular Universal 的StateTransferInitializerModule模块代码，下面是代码。

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { DOCUMENT } from '@angular/common';

export function domContentLoadedFactory(doc: Document) {
  return () => new Promise ((resolve, _reject) => {
    const contentLoaded = () => {
      doc.removeEventListener('DOMContentLoaded', contentLoaded);
      resolve();
    };
    if (doc.readyState === "complete" || doc.readyState === "interactive") {
      // if DOMContentLoaded already fired
      // document is already ready to go
      resolve();
    }
    else{
      // if DOMContentLoaded is not fired then we are listening the event.
      doc.addEventListener('DOMContentLoaded', contentLoaded);
    }
  });
}


@NgModule({
  providers: [
    {provide: APP_INITIALIZER, multi: true, useFactory: domContentLoadedFactory, deps: [DOCUMENT]},
  ]
})
export class StateTransferInitializerModule {

}

供参考，添加了stackblitz代码。

Angular通用状态转移初始化器

1 个答案: