替代/deep/ [英] Alternative to /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 元素的组件.

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

这样做意味着:

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

Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

如果您关闭视图封装，请确保仅针对您真正想要的 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/的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！