如何将排序表格表头的箭头移至右侧？

你可以通过给表头单元格（th）添加flex布局样式，让文字和排序箭头横向分布，箭头自动靠右侧。有两种简单的实现方式：

方式一：直接在指令host中绑定内联样式 #

修改指令的host配置，添加flex相关的样式绑定，让表头内容和箭头分别居左和居右：

@Directive({
  selector: 'th[sortable]',
  standalone: true,
  host: {
    '[class.bi-caret-down-fill]': 'direction === "asc"',
    '[class.bi-caret-up-fill]': 'direction === "desc"',
    '[style.display]': '"flex"',
    '[style.justify-content]': '"space-between"',
    '[style.align-items]': '"center"',
    '(click)': 'rotate()',
  },
})

方式二：通过自定义CSS类实现（更易维护） #

1. 先在全局样式文件（比如styles.css）中定义一个布局类：

.sortable-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

2. 然后修改指令的host配置，添加这个自定义类：

@Directive({
  selector: 'th[sortable]',
  standalone: true,
  host: {
    '[class.bi-caret-down-fill]': 'direction === "asc"',
    '[class.bi-caret-up-fill]': 'direction === "desc"',
    '[class.sortable-header]': 'true',
    '(click)': 'rotate()',
  },
})

两种方式都能让排序箭头从表头左侧移到右侧，同时保证表头文字和箭头垂直居中对齐。

内容的提问来源于stack exchange，提问作者Mohamed Jihed Jaouadi