Question

在我以前的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
 }
}

无法选择嵌套的元件样式角度7

0 个答案: