在组件之间切换时，ng-deep 不起作用？

Posted 2023-03-06

【中文标题】在组件之间切换时，ng-deep 不起作用？

【英文标题】：ng-deep not working when switching between components?

【发布时间】：2021-09-24 07:32:54

【问题描述】：

我有 2 个组件 A B ，在每个组件的 css 文件中我有一个 ngx-bootstrap 日期选择器，我需要自定义（对齐）。

在我有的组件 css 文件中

 ::ng-deep .bs-datepicker  
margin-top:-100px
 

在 B 组件 css 文件中我有

::ng-deep .bs-datepicker  
margin-top:-80px
 

当我转到组件 A 并检查元素时，它会显示 A 的 css 文件，这就是我想要的， 但是当转到组件 B 再回到组件 A 时，它会在组件 A 中显示 B 的 Css 文件，因此在组件 A 中显示 margin-top:80px。

当我从一个组件切换到另一个组件时，如何在这两个组件之间分离样式而不影响另一个组件？

【参考方案1】：

您可以将bs-datepicker 包装在一个容器中并使用它的名称进行捕获

::ng-deep .container-one * .bs-datepicker  
margin-top:-100px
 

::ng-deep .container-two *  .bs-datepicker  
margin-top:-80px
 

在 html 文件中：

<div class="container-one">
    <input type="text" bsDatePicker>
</div>

<div class="container-two">
    <input type="text" bsDatePicker>
</div>

这些会有不同的样式

我还建议停止使用 ::ng-deep 以防止出现意外行为（就像您在这种情况下一样）。

上述方法也适用于 styles.scss 文件，但没有 ::ng-deep 和正确的 angular.json 配置

【讨论】：

我之前有 style.css 用于这种安排，但我需要为这两个组件设置不同的 margin-top 值。对于styles.css，它只为所有组件假设一种样式。 HTML 是 ，我的 html 中没有 容器和 bs-datepicker 之间的 * 是干什么用的？不过还是谢谢。

关于 HTML 标签 - 我已经编辑过 - 样式相同。 * 表示容器一下的每个 HTML 元素，因此 .container-one * .bs-datepicker 表示：容器一下具有 bs-datepicker 类的每个元素，所以只要你用不同的容器类名称分隔就可以了!

* 也适用于 .css 文件，对吗？它不适合我。我已将::ng-deep .container-one * .bs-datepicke 放入 .css 文件中

我的容器中有几个日期选择器，这是它不工作的原因吗？

不应该可以。也许你有一个类型并忘记了.bs-datepicke 中的 r？ ,你能分享你的HTML相关代码吗？\