替代/深/深/

Question

我想改变ng引导分页组件的样式，并在一个角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;
    }
  }

Answer 1

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

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

这样做意味着：

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

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

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

Answer 2

*ng深，/deep/和>>>贬义：：ng深伪类选择器也有两个别名：>>>和/deep/，这三个都将很快被移除。 其主要原因是，这种将样式隔离沙箱插入组件周围的机制可能会鼓励不良的样式设计实践。 情况仍在演变，但现在，如果需要，可以在某些用例中使用：：ng-深度。

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

因此，使用：：ng-深度代替