Angular项目如何自定义ngx-treeview样式 将展开箭头移至左侧

不需要修改ngx-treeview的源码，通过CSS样式覆盖就能快速实现需求，两种常用实现方式按需选择即可：

• 全局生效：所有页面用到的ngx-treeview组件都会应用这个样式
  打开项目根目录下的全局样式文件（通常是src/styles.css或src/styles.scss），添加如下代码：

  /* 调整树节点布局，给左侧箭头预留位置 */
  .ngx-treeview-item {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 22px;
  }
  /* 将展开/折叠箭头定位到节点最左侧 */
  .ngx-treeview-item .fa-caret-right,
  .ngx-treeview-item .fa-caret-down {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
  }
  /* 清除原有箭头占位造成的文字偏移 */
  .ngx-treeview-item .ngx-treeview-item-content {
    margin-left: 0 !important;
  }
  

• 单页面生效：仅当前业务组件里的树组件生效，不影响其他页面
  打开对应业务组件的样式文件，用Angular的样式穿透语法写覆盖样式，避免视图隔离导致样式不生效：

  :host ::ng-deep {
    .ngx-treeview-item {
      display: flex;
      align-items: center;
      position: relative;
      padding-left: 22px;
    }
    .ngx-treeview-item .fa-caret-right,
    .ngx-treeview-item .fa-caret-down {
      position: absolute;
      left: 2px;
      top: 50%;
      transform: translateY(-50%);
    }
    .ngx-treeview-item .ngx-treeview-item-content {
      margin-left: 0 !important;
    }
  }
  

注意：如果你安装的ngx-treeview版本较新，箭头元素的类名有调整，可以直接打开浏览器开发者工具选中箭头元素，复制对应的类名替换上述代码里的.fa-caret-right、.fa-caret-down即可。代码里的padding-left和left数值可以按需调整，控制箭头和节点文字的间距。

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