Angular8中如何调整ngx-owl-carousel-o导航箭头到滑块左右两侧

Angular默认采用Emulated模式的视图封装机制，会为当前组件的所有样式追加当前组件独有的属性哈希标记，只有带有对应标记的DOM元素才会被样式命中。
ngx-owl-carousel-o渲染生成的导航箭头DOM属于第三方组件库的内部结构，不会继承当前AppComponent的属性哈希标记，因此直接写在组件scss中的原生选择器无法匹配到这些元素，样式自然无法生效。

方案1：将样式写入全局样式文件 #

全局样式不受组件封装机制的限制，可以直接匹配到页面中所有符合选择器规则的DOM元素，操作简单且不会造成大范围样式污染。
你当前angular.json中已经引入了全局样式文件src/styles.css，只需要将调整箭头位置的CSS写入这个文件即可：

/* 写入 src/styles.css 全局文件 */
/* 给轮播容器加相对定位，作为箭头的定位参照 */
.owl-carousel {
  position: relative;
}

/* 覆盖默认导航按钮的定位，将箭头移到轮播左右两侧 */
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  line-height: 40px;

  /* 左右定位，数值可根据布局需求调整 */
  &.owl-prev {
    left: -20px;
  }
  &.owl-next {
    right: -20px;
  }

  &:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
  }
}

方案2：在组件内使用样式穿透 #

如果不想把轮播相关的样式抽到全局文件，需要在组件作用域内调整样式，可以使用Angular提供的::ng-deep穿透选择器，绕过组件封装的限制，命中第三方组件的内部DOM。
将以下代码写入app.component.scss即可：

/* 写入 app.component.scss 文件 */
// 锁定当前组件下的owl轮播容器，缩小样式作用范围
app-root .owl-carousel {
  position: relative;

  ::ng-deep .owl-nav {
    .owl-prev, .owl-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      margin: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 20px;
      line-height: 40px;

      &.owl-prev {
        left: -20px;
      }
      &.owl-next {
        right: -20px;
      }

      &:hover {
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
      }
    }
  }
}

• 调整箭头定位数值时，记得给轮播的父容器预留足够的左右空间，避免箭头超出可视区域被页面裁切。
• 不要为了绕过样式封装直接将AppComponent的ViewEncapsulation设置为None，这种操作会关闭全应用的组件样式隔离能力，极易引发全局样式冲突，尤其你项目中还集成了Angular Material组件库。
• 如果后续将轮播组件迁移到其他子组件中，对应样式只要写在该子组件的scss中，用同样的穿透逻辑即可，不需要改动全局样式。

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