/deep/ 的替代方案

Question

我希望修改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;
    }
  }

- s4tr2

Answer 1

除了使用/deep/或::ng-deep之外，另一种选择是在使用第三方UI元素的组件上禁用视图封装。

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

这样做意味着：

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

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

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

- frido

---

这是与BEM一起的最佳选择。 - gsziszi

请记住，ViewEncapsulation.None 会影响整个应用程序，因此如果您选择这种解决方案，最好使用包装器类来包装您的 CSS。有关更多详细信息和解决方案，请参见此答案 https://dev59.com/8VYN5IYBdhLWcg3wuKC5#49308475 和评论。 - Ferie

Answer 2

::ng-deep，/deep/和>>>已被弃用。::ng-deep伪类选择器也有两个别名：>>>和/deep /，并且这三个别名都将很快被删除。主要原因是该机制可能会鼓励不良的样式实践，破坏了组件周围的样式隔离沙箱。目前情况仍在发展中，但如果需要特定的用例，则可以使用::ng-deep。因此，请改用::ng-deep。参考链接：https://blog.angular-university.io/angular-host-context/。

- René Winkler