Angular 6 Primeng confirmdialog inside dialog deactivates page

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

尝试将以下内容添加到您的组件样式中sheet

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

如果没有 ::ng-deep，它将需要进入您的全局样式 sheet。

请参考这个 SO 问题的答案，了解为什么可以使用 ::ng-deep，直至另行通知。

Answer 2

相反，最好在全局 css（根级别的 Style.css）中使用相同的 css

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

但是如果你想在你的组件级别使用 css 那么你必须需要 ng-deep 如下 -

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

PS：顺便说一句，使用如此大的属性（如 100000 ）到 z-index 是不好的。（根据评论部分）

Angular 6 Primeng confirmdialog inside dialog deactivates page

Angular 6 Primeng confirmdialog inside of dialog deactivates page

css

angular

dialog

primeng

confirm-dialog