Angular 6 Primeng Подтвердить диалог внутри диалога деактивирует страницу

Question

Я пытаюсь добавить диалоговое окно подтверждения в диалоговое окно, которое находится в компоненте на моей панели навигации.

  <p-menubar>
      <div>
          <app-overlay></app-overlay>
      </div>
  </p-menubar>

этот компонент имеет оверлейную панель, которая открывает диалоговое окно. На странице, с которой он открывается, также есть диалоговое окно подтверждения, которое используется по другим причинам. Всякий раз, когда открывается диалоговое окно подтверждения наложенной панели, оно открывает другой экран, закрывающий экран и замораживающий экран. Я использовал индекс z, чтобы вывести диалоговое окно вперед, но фон все еще отключен после закрытия диалогового окна. Я также попробовал [appendTo]="body". Если я удаляю диалог подтверждения на последней странице, он ведет себя как обычно. Итак, я знаю, что это как-то связано с двумя, один открывает другой.

Внутри компонента, который также имеет диалоговое окно подтверждения, которое открывается, когда это активировано:

<p-dialog>
    <p-confirmDialog [appendTo]="body"></p-confirmDialog>
    <p-messages [(value)]="errors"></p-messages>
    <div>
    </div>
    <p-footer>
    </p-footer>
</p-dialog>

Некоторые CSS:

.ui-confirmdialog {
     z-index: 100000 !important;
}

Ничто из того, что я пробовал, не сработало, поэтому любая помощь будет оценена

Answer 1

Попробуйте добавить ниже в таблицу стилей компонента

::ng-deep .ui-confirmdialog {
  z-index:100000 !important
}

Без::ng-deep он должен был бы войти в вашу глобальную таблицу стилей.

---

Пожалуйста, обратитесь к ответу на этот SO вопрос, почему использование::ng-deep приемлемо до дальнейшего уведомления.

Что использовать вместо::ng-deep

Answer 2

Вместо этого лучше использовать тот же CSS в вашем глобальном CSS (Style.css корневого уровня)

body .ui-confirmdialog {
     z-index: 1001 !important;
}

Но если вы хотите использовать CSS на уровне компонентов, то вам необходимо ng-deep как показано ниже -

:host ::ng-deep .ui-confirmdialog {
    z-index: 1001 !important;
}

PS: Кстати, нехорошо использовать такое большое свойство (как 100000) для z-index. (Согласно разделу комментариев)