Angular 6 中的 Css 问题

Question

在我的 Angular 6 应用程序中。我创建了许多组件。对于显示数据，我使用了 ng2-smart-table。

我有一些隐藏默认分页栏的特定要求。并显示自定义分页。

为此，我刚刚在组件的 SCSS 文件中设置了 css。

::ng-deep .ng2-smart-pagination-nav {
   display: none
}

但这也会影响所有其他组件。

直到我知道和 RND，在 Angular 我们使用每个组件都有他们的每个 scss 文件。所以我的问题是为什么这个 css 也会影响所有其他组件？以及如何预防这个问题？

Answer 1

The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component

使用

:host Use the :host pseudo-class selector to target styles in the element that hosts the component (as opposed to targeting elements inside the component's template).

:host ::ng-deep .ng2-smart-pagination-nav {
  display: none
}