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

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

0 голосов
/ 29 ноября 2018

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

  <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;
}

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

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Вместо этого лучше использовать тот же 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-индекса.(Согласно разделу комментариев)

0 голосов
/ 29 ноября 2018

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

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

Без :: ng-deep вам потребуется перейти в глобальную таблицу стилей.

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

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

...