/deep/的替代品

Posted 2023-03-06

【中文标题】/deep/的替代品

【英文标题】：Alternative to /deep/

【发布时间】：2019-01-13 11:49:25

【问题描述】：

我想更改 ng bootstrap 分页组件的样式并在 Angular 6 应用程序中使用 /deep/ 链接。以下代码工作正常，但控制台显示代码已弃用的警告。

那么，我应该如何更改它以消除警告？

这是我目前使用的 CSS 代码：

ngb-pagination /deep/ .page-item.disabled .page-link
    background: none;
  

 ngb-pagination /deep/ .page-item.active .page-link 
    background-color: #223C61;
    &:focus, &:visited
      outline: none;
      box-shadow: none;
    
  

【参考方案1】：

使用/deep/ 或::ng-deep 的替代方法是在使用第三方UI 元素的组件上禁用View Encapsulation。

@Component(
  selector: 'app-mycomp',
  templateUrl: './mycomp.component.html',
  styleUrls: ['./mycomp.component.scss'],
  encapsulation: ViewEncapsulation.None
)

这样做意味着：

Angular 将 CSS 添加到全局样式中。范围规则， 前面讨论的隔离和保护不适用。这是 本质上与将组件的样式粘贴到 HTML 中相同。

如果您关闭视图封装，请确保仅针对您真正需要的 html 元素，而不是应用程序不同组件中的任何其他相同类型的元素（例如，添加自定义 class 或id 到您的元素）。

当我禁用 ViewEncapsulation 时，我还必须在我的 CSS 中使用 !important 来覆盖现有的第三方样式，而 ::ng-deep 并不总是需要它。

【讨论】：

和BEM一起是最好的选择

请记住，ViewEncapsulation.None 会冒泡到整个应用程序，因此如果您使用此解决方案，使用包装类包装您的 CSS 可能是个好主意。另请参阅此答案***.com/a/49308475/2275011 和 cmets 了解更多详细信息和解决方案。

【参考方案2】：

::ng-deep、/deep/ 和 >>> 弃用 ::ng-deep 伪类 选择器还有几个别名：>>> 和 /deep/，以及所有三个 即将被删除。

主要原因是这种穿透风格的机制 组件周围的隔离沙箱可能会鼓励不良 造型实践。

情况仍在发展，但现在可以使用 ::ng-deep 如果某些用例需要。

https://blog.angular-university.io/angular-host-context/

所以改用 ::ng-deep