Нг глубокие стили делают отдельные для различных компонентов в Angular 5 - PullRequest
Новая
       40

Нг глубокие стили делают отдельные для различных компонентов в Angular 5

0 голосов
/ 29 января 2019

Я использую **ngx bootstrap modal** в двух разных компонентах и ​​в двух разных компонентах. Я использовал :: ng-deep .modal-dialog для установки ширины и высоты 

in component one

::ng-deep .modal-dialog {
width: 200px;
height : 200px
}

in another(2nd) component 
::ng-deep .modal-dialog {
    width: 400px;
    height : 400px
    }

, но когда я перехожу к одному компонентус другой стороны, значения :: ng-deep становятся одинаковыми и выглядят как константы width и height, так как значения css для модального режима не меняются в соответствии с уровнем компонента, как глобальный уровень

1 Ответ

0 голосов
/ 29 января 2019

попробуйте добавить пользовательский класс, как объяснено здесь .В этом примере gray modal-lg CSS-класс добавляется к существующему modal-dialog классу: 

<div role="document" class="modal-dialog gray modal-lg">
  <div class="modal-content">
    ...
  </div>
</div>

, поэтому попробуйте добавить разные классы в каждый компонент (component1 и component2 в моем примере) и переписатьВаш CSS: 

::ng-deep .modal-dialog.component1 {
  width: 200px;
  height : 200px
}

в другом (втором) компоненте 

::ng-deep .modal-dialog.component2 {
  width: 400px;
  height : 400px
}

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

...