У меня около 20 модальных диалогов (все имеют одинаковый стиль) в моем теле приложения и один модальный диалог в нижнем колонтитуле приложения, и оба они имеют разные стили. Я могу загружать диалоги.
<div class="app d-flex flex-column">
<app-header></app-header>
<app-body class="flex-grow-1"></app-body>
<app-footer></app-footer>
</div>
Модальное диалоговое окно нижнего колонтитула находится за пределами тела приложения, поэтому я использую приведенный ниже код для загрузки его scss
::ng-deep .modal-dialog {
width: 70%;
}
Модальные диалоговые окна html выглядят так при загрузке в html
App-диалоговое окно основного текста:
<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">
..
Но проблема в том, что это модальное диалоговое окно нижнего колонтитулатеперь применяется ко всем другим модальным диалогам в моих компонентах app-body.
Чтобы исправить это, я применил приведенный ниже код css
:host ::ng-deep .modal-dialog {
width: 70%;
}
На этот раз стиль модальных диалогов моих компонентов app-body:применяется к моему нижнему колонтитулу.
Итак, как мне убедиться, что мой нижний колонтитул получает свой собственный CSS, не влияя или не влияя на другие модальные диалоги в теле приложения.