替代/deep/

问题描述

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

I want to change the styles of ng bootstrap pagination component and using /deep/ links in an Angular 6 app. The following code works fine but the console is showing a warning that the code is deprecated.

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

So, how should I change it to get rid of the warning?

这是我当前正在使用的CSS代码:

Here is the CSS code I am currently using:

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;
    }
  }

推荐答案

使用/deep/或::ng-deep的另一种方法是禁用使用第三方UI元素的组件上的View Encapsulation .

An alternative to using /deep/ or ::ng-deep is to disable View Encapsulation on your components that use third party UI elements.

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

这样做意味着:

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

If you turn off view encapsulation make sure to target only the html element you really want, and not any other elements of the same type in different components of your app (e.g. add a custom class or id to your element).

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

When I disabled ViewEncapsulation I also had to use !important in my CSS to overwrite existing third party styles, while it wasn't always needed with ::ng-deep.

这篇关于替代/deep/的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！