如何修改HTML中Angular自定义库下拉组件的默认箭头图标为三点

可行性说明 #

完全可以实现，不需要引入任何第三方库。之前的实现出现空白主要是3个核心问题：

• 自定义类挂载位置错误：下拉箭头属于<dls-dropdown>组件根节点的内部触发元素，你把类加在了<dls-option>上，样式无法作用到箭头节点
• 图标字体字符匹配问题：dls-icons-24是图标字体库，直接传入普通文本"..."不会被识别为对应图标，会渲染为空
• Angular样式封装隔离：组件内默认的样式封装会阻止样式穿透到子组件内部，无法修改<dls-dropdown>的内部样式

具体实现方案 #

第一步：调整模板结构 #

把自定义类挂载到<dls-dropdown>根节点上：

<dls-dropdown class="dots-dropdown">
    <dls-option class="pt-quiet">
        Apple
    </dls-option>
    <dls-option>
        Banana
    </dls-option>
</dls-dropdown>

第二步：编写样式代码 #

提供两种实现方案，优先选择第一种纯文本实现，不依赖组件库内置图标，兼容性最好：

方案1：纯文本三点实现（无任何依赖）

如果是写在当前组件的样式文件里，需要加::ng-deep做样式穿透：

// 组件内样式写法
::ng-deep .dots-dropdown {
  // 以下选择器可按F12审查到的dls-dropdown真实DOM结构替换
  .dropdown-trigger {
    // 隐藏原有箭头元素
    .default-arrow {
      display: none;
    }
    // 在触发区追加三点伪元素
    &::after {
      content: "...";
      font-size: 20px;
      font-weight: bold;
      color: #000;
      letter-spacing: 2px; // 调整三点间距
      margin-left: 8px; // 调整和左侧文字的间距
    }
  }
}

// 如果是写在全局styles.scss里，不需要加::ng-deep
// .dots-dropdown {
//   .dropdown-trigger {
//     .default-arrow {
//       display: none;
//     }
//     &::after {
//       content: "...";
//       font-size: 20px;
//       font-weight: bold;
//       color: #000;
//       letter-spacing: 2px;
//       margin-left: 8px;
//     }
//   }
// }

方案2：使用dls-icons内置三点图标（如果存在）

如果确认dls-icons-24库内置三点图标，先查询到对应图标的Unicode编码，替换content内容即可：

::ng-deep .dots-dropdown {
  .dropdown-trigger {
    .default-arrow {
      display: none;
    }
    &::after {
      font-family: dls-icons-24, serif;
      content: "\eXXX"; // 替换为三点图标对应的Unicode编码
      font-size: 24px;
      color: #000;
      margin-left: 8px;
    }
  }
}

注意事项 #

• 可通过浏览器F12审查<dls-dropdown>渲染后的真实DOM结构，替换示例中的.dropdown-trigger、.default-arrow为你实际项目中对应节点的选择器即可
• 如果不想使用::ng-deep，直接把样式代码放到项目全局样式文件中即可，因为加了.dots-dropdown类前缀，不会污染其他下拉组件的样式

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