如何（右/左/中）将 mat-table 中的各个列标题与 mat-sort-header 对齐？

Question

我将 Angular 16 与 Angular Material 16 一起使用，并且我按照此处的文档设计了一个带有可排序列的表格。某些列包含数字数据，我想将它们右对齐。我可能还想将其他列居中对齐。我不想对所有列应用相同的水平对齐方式。

Angular Material 自动为每列生成 CSS 类，如

.mat-column-<column-name>

，因此您可以设置列中所有单元格的样式。这可以使第

foo

列中的数字右对齐：

.mat-column-foo {
    text-align: right;
}

它甚至首先适用于该列的 TH 标题单元格。但是，在我使用

mat-sort-header

添加排序到我的列后，新生成的标题默认左对齐。这是我的 HTML 中的典型列定义：

<ng-container matColumnDef="foo">
    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by Foo">FOO</th>
    <th mat-cell *matCellDef="let element">{{element.foo}}</td>
</ng-container>

如何右对齐可排序标题，或居中对齐另一个此类标题？

我看过的其他问题：

• 46154838关于居中对齐所有标题的方法。
• 59418930 仅关于 center 对齐，并且没有适用于

  mat-sort-header

  条件的答案。

Answer 1

我从 TotallyNewb 找到了问题 76505146 的部分答案。他表示“由于这种情况发生在通过指令注入的新组件内，因此 [CSS 解决方案] 需要在全局样式中发生”。因此，为了居中对齐列标题，他在全局 styles.scss

 中创建了一个新样式，并将其应用到组件 HTML 中的 

TH。

扩展该答案以添加右对齐选项，这是我添加到全局的内容

styles.scss

：

.centered-sorted-header {  
  .mat-sort-header-container {
    justify-content: center;
  }
}
.right-aligned-sorted-header {  
  .mat-sort-header-container {
    justify-content: end;
  }
}

然后，在我的组件的 HTML 中，我可以定义一个右对齐和居中的列，如下所示：

<ng-container matColumnDef="foo">
    <th class="centered-sorted-header" mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by Foo">Foo</th>
    <th mat-cell *matCellDef="let element">{{element.foo}}</td>
</ng-container>

<ng-container matColumnDef="bar">
    <th class="right-aligned-sorted-header" mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by Foo">Bar</th>
    <th mat-cell *matCellDef="let element">{{element.bar}}</td>
</ng-container>

这有效。如果有一种方法可以在不影响

global样式的情况下做到这一点，那么所有代码更改都保留在组件中，那将是首选。