модальный диалог не загружается должным образом при вызове из ngOnit компонента приложения

Question

Я пытаюсь загрузить модальное диалоговое окно из компонента приложения приложения Angular 8. Модальное диалоговое окно должно загрузиться после входа пользователя в систему. Модальное диалоговое окно использует компонент Соглашения для извлечения данных и отображения в модальном окне. У меня проблема с вызовом модального диалога из компонента приложения. Когда я помещаю вызов в диалог loadModal в конструкторе AppComponent, он работает нормально. Единственная проблема заключается в том, что если я обновлю sh браузер, модальное диалоговое окно не появится снова.

Но если я предпочитаю делать вызов из ngOnit, он загружает пустой модал даже перед тем, как войти в систему. Так что я могу видеть экран входа и пустое модальное окно поверх этого. Как я понимаю, ngOnit запускается после конструктора. Так почему у меня проблема с вызовом из ngOnit. Это потому, что эта проблема возникает один раз после того, как страница входа уже загружена, и конструктор не вызывается до тех пор, пока вы не войдете в систему. логин пользователя, он должен быть представлен с помощью модального диалога. Если он обновит браузер, ему снова будет показан модальный диалог.

Я пробовал следующее, но это не похоже на работу. Я попытался ввести свойство в сервисе и соответственно контролировать загрузку диалога. Обратите внимание, что я не использую какое-либо управление состоянием, такое как ngsx или ngrx, так как оно является избыточным, и я пытаюсь управлять с помощью сервиса, который является одиночным.

Компонент приложения

export class AppComponent implements OnDestroy, OnInit {
  showSpinner: boolean;
  popupVisible: boolean;
  countdownText: string;
  countdownInMinutes = 5;
  currentUser: any;
  countdown = this.countdownInMinutes * 60;
  window = window;
  navDisplay: any;
  private subscriptions = new Subscription();
  private settings: IAppConfig;
  agreementModalStatus: any;
  public modal: any;

  @Select(AgreementState.agreement) agreementModalState$: Observable<AgreementsStateModel>;
  constructor(
    private spinnerEventService: SpinnerEventService,
    appConfigService: AppConfigService,
    appInsightsService: AppInsightsService,
    routingState: RoutingState,
    versionCheckService: VersionCheckService,
    private broadcastService: BroadcastService,
    private msalService: MsalService,
    private readonly userService: UserService,
    public agreementsService: AgreementsService,
    public modalService: NgbModal) {
    routingState.loadRouting();

    spinnerEventService.spinnerStatusChange$.subscribe(status => this.showSpinner = status.showSpinner);

    this.settings = appConfigService.getAppSettings();

    appInsightsService.config = { instrumentationKey: this.settings.appInsights.instrumentationKey };
    appInsightsService.init();
    versionCheckService.initVersionCheck(this.settings.env.url, this.showPopup);
    this.navDisplay = false;

    this.subscriptions.add(this.broadcastService.subscribe('msal:loginFailure', (err: MSALError) => {
      if (this.userTryingToResetPassword(err)) {
        this.msalService.authority = `https://login.microsoftonline.com/tfp/${this.settings.aad.tenant}/${this.settings.aad.passwordResetPolicy}`;
        localStorage.setItem('custom.recovery.password.flow', 'true');
      }

      appInsightsService.trackException(<Error>{ name: err.error, message: err.errorDesc });
      return this.msalService.loginRedirect(this.settings.aad.b2cScopes);
    }));

    this.subscriptions.add(this.broadcastService.subscribe('msal:loginSuccess', () => {
      if (this.userFinishedPasswordReset()) {
        localStorage.setItem('custom.recovery.password.flow', 'false');
        this.msalService.logout();
        return;
      }
         this.userService.load();
         console.log('inside the constructor');
         this.loadModalDialog();
    }));
  }

    public ngOnInit() {
    // this.loadModalDialog();
  }

    public loadModalDialog() {
    console.log('inside AppComponent');
    this.modal = this.modalService.open(AgreementComponent, { size: 'lg', centered: true , backdrop: 'static', keyboard: false});
  }

I пробовал следующий

Сервис соглашения

   set showModalDialog(show: boolean) {
  this._showModalDialog = show;
 }
 get showModalDialog() {
   return this._showModalDialog;
 }

Конструктор AppComponent

this.subscriptions.add(this.broadcastService.subscribe('msal:loginSuccess', () => {
      if (this.userFinishedPasswordReset()) {
        localStorage.setItem('custom.recovery.password.flow', 'false');
        this.msalService.logout();
        return;
      }
      this.userService.load();

         console.log('inside the constructor');
         this.agreementsService.showModalDialog = false;
         this.loadModalDialog();

    }));

AppComponent ngOnit

  public ngOnInit() {
      if (this.agreementsService.showModalDialog) {
       this.loadModalDialog();
      }
  }