Angular组件切换时::ng-deep样式互相覆盖失效该如何解决

Angular 中 ::ng-deep 会突破组件样式封装，将匹配的样式规则提升到全局样式表，且组件销毁时不会自动移除这部分全局样式。
你当前写法中两个组件定义的全局规则优先级完全相同，后加载的组件B样式会覆盖先加载的组件A样式，因此切换路由后会出现样式错乱。

• 方案1：给datepicker添加专属自定义容器类

  1. 分别给两个组件内调用的datepicker传入containerClass参数，指定唯一的自定义类名：
     组件A模板中调用示例：

     <input type="text" bsDatepicker [containerClass]="'datepicker-a'">
     

     组件B模板中调用示例：

     <input type="text" bsDatepicker [containerClass]="'datepicker-b'">
     

  2. 调整两个组件的CSS规则，用自定义类限定作用范围：
     组件A的CSS：

     :host ::ng-deep .datepicker-a.bs-datepicker { 
       margin-top: -100px;
     } 
     

     组件B的CSS：

     :host ::ng-deep .datepicker-b.bs-datepicker { 
       margin-top: -80px;
     } 
     

  该方案通过自定义类提升了选择器优先级，两个规则互相独立，不会出现覆盖问题。

• 方案2：全局样式分类定义
  直接在项目全局样式文件（如styles.css）中定义两个规则，不需要在组件内写::ng-deep：

  .datepicker-a.bs-datepicker { 
    margin-top: -100px;
  } 
  .datepicker-b.bs-datepicker { 
    margin-top: -80px;
  } 
  

  同样需要给组件内的datepicker传入对应containerClass参数即可。

内容的提问来源于stack exchange，提问作者chepeharshit