0

我的 app-body 中有大约 20 个模态对话框（所有样式都相同），app-footer 中有一个模态对话框，它们都有不同的样式。我可以加载对话框。

<div class="app d-flex flex-column">
  <app-header></app-header>
  <app-body class="flex-grow-1"></app-body>
  <app-footer></app-footer>
</div>

页脚的模态对话框在 app-body 之外，所以我使用下面的代码来加载它的 scss

::ng-deep .modal-dialog {
  width: 70%;
}

模态对话框 html 在 html 中加载时看起来像这样

应用程序主体对话框：

<modal-container class="modal fade show" role="dialog" tabindex="-1" style="display: block;" aria-modal="true">

..

页脚对话框：

<modal-container class="modal fade show" role="dialog" tabindex="-1" style="display: block;" aria-modal="true">

..

但问题是，这个页脚模式对话框现在应用于我的应用程序主体组件中的所有其他模式对话框。

为了解决这个问题，我应用了下面的 css

:host ::ng-deep .modal-dialog {
  width: 70%;
}

这一次，我的 app-body 组件的模态对话框样式应用于我的页脚。

那么我如何确保我的页脚拥有自己的 css 而不会受到影响或不影响 app-body 中的其他模式对话框。

4

0 回答 0