ng在组件之间切换时不工作？

kcwpcxri 于 2021-09-29 发布在 Java

关注(0)|答案(1)|浏览(259)

我有两个组件a和b，在每个组件的css文件中，我有一个ngx引导数据采集器，我需要自定义（对齐）。
在一个组件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中显示边距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 配置