Угловой универсальный инициализатор передачи состояния - PullRequest
Новая
       7

Угловой универсальный инициализатор передачи состояния

0 голосов
/ 11 декабря 2018

Как правильно использовать этот модуль https://github.com/angular/universal/tree/master/modules/common/src/state-transfer-initializer

После удаления документа DOMContentLoaded и использования этого модуля передача состояния перестает работать в браузере.Как правильно использовать этот модуль?

PS Исправлено в выпуске @ nguniversal / common @ 7.1.0, PR https://github.com/angular/universal/commit/0e38dd1

1 Ответ

0 голосов
/ 11 декабря 2018

Если событие DOMContentLoaded уже запущено и после добавления прослушивателя для события DOMContentLoaded оно не будет выполнено.

Мы можем проверить, загружен документ или нет, с помощью следующей проверки.

if (doc.readyState === "complete" || doc.readyState === "interactive") {
    // document is ready
}

Если DOMContentLoaded не запущено, мы можем его прослушать. 

function handler() {
    // After DOMContentLoaded
}
document.addEventListener('DOMContentLoaded', handler);

Так что нам нужно resolve() обещание, если DOMContentLoaded уже выполнено,Я изменил StateTransferInitializerModule код модуля Angular Universal и следующий код: 

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 {

}

Для справки добавлен код стека .

...