Невозможно выбрать стиль вложенного компонента угловой 7 - PullRequest
Новая
       19

Невозможно выбрать стиль вложенного компонента угловой 7

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

В моем старом стиле scss я использовал ng-deep, чтобы выбрать стиль во вложенном компоненте, но после того, как я перешел с угла 5 на 7. Этот стиль больше не работает, я пытаюсь выяснить, почему, но я не сделалувидеть любые изменения или примечания по этому вопросу, за исключением ng-deep амортизирующих.Что под капотом, которое изменилось, может вызвать это?

Я прочитал это https://blog.angular -university.io / angular-host-context / , и я думаю, что понимаю, как это работает, но я не могу соединить их вместе, чтобы сформулировать, почему,Заранее спасибо.

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

bootstrap 4 + ngb-bootstrap 4.

index.html 

<ngb-modal-window role="dialog" tabindex="-1" class="modal fade show d-block">
 <div role="document" class="modal-dialog">
  <div class="modal-content">
   <div _ngcontent-c5="" class="modal-body">
    <hello-world _ngcontent-c5="" _nghost-c6="">
     <div _ngcontent-c6="" class="target"></div>
    </hello-world></div>
    <div _ngcontent-c5="" class="modal-footer">
     <button _ngcontent-c5="" class="btn">Close</button>
    </div>
  </div>
 </div>
</ngb-modal-window>

index.scss 

:ng-deep .modal-body {
 .target {
   width: 100px;
   height: 100px;
   background: red;
 }
}

После обновления до angular 7 приведенный выше код больше не работает.Вместо этого я должен написать свой код таким образом, чтобы получить доступ к ngb-modal.

index.scss 

:ng-deep .modal { // select the top level style
 // index style
 // able to style modal
 // but unable to select the .target style
}

   // below style does not work
:host:ng-deep .modal-body { 
 .target {
   //style
 }
}
...