替代/深/

Question

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

那么,我应该如何更改它以摆脱警告？

这是我目前使用的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;
    }
  }

Answer 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元素,而不是应用程序的不同组件中的任何其他相同类型的元素(例如,向您的元素添加自定义类或ID).

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

Answer 2

::ng-deep、/deep/ 和 >>> 弃用 ::ng-deep 伪类选择器还有几个别名：>>> 和 /deep/，这三个别名很快就会被删除。

其主要原因是，这种刺穿组件周围样式隔离沙箱的机制可能会鼓励不良的样式实践。

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

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

所以使用 ::ng-deep 代替