Angular Material 12：自定義表格排序按鈕

Question

我有一個帶排序的角度材料表：

table.component.html :

<table mat-table [dataSource]="dataSource" matSort>

  <th mat-header-cell mat-sort-header *matHeaderCellDef>
    <span>Name</span>
  </th>

  ...
</table>

這會以通常的材料樣式在標題單元格中顯示一個排序按鈕。

我需要更改排序按鈕的樣式（不是功能）。 我怎樣才能做到這一點？ 我嘗試創建自己的按鈕，但我不知道如何訪問材料排序按鈕的功能。

table.component.html :

<table mat-table [dataSource]="dataSource" matSort>

  <th mat-header-cell *matHeaderCellDef>
    <span>Name</span>

    <!-- `style` contains some custom styling -->
    <!-- `(click)` should do the same as on the Material sort button -->
    <button mat-button mat-icon-button (click)=??? style=...>
      <mat-icon>sort</mat-icon>
    </button>
  </th>

  ...
</table>

Answer 1

我不知道這是否是最好的方法，但你可以

1.-使顯示沒有“箭頭”。 為此，在你的styles.css - 所有應用程序共有的樣式 - 你可以寫

.mat-sort-header-ste,.mat-sort-header-arrow {
  display:none!important
}

2.- 那么，如果你的排序被稱為sort ，你需要使用 "sort.active" 和 sort.direction` 的值

硬代碼，對於名為“名稱”的列可以是

@ViewChild(MatSort) sort: MatSort;
this.dataSource.sort = this.sort;

<th mat-header-cell *matHeaderCellDef mat-sort-header> 
{{sort && sort.active=="name"?
      sort.direction=='asc'?'Up':
      sort.direction=='desc'?'Down':
      null:null
}} Name </th>

您可以使用 [ngClass] 或其他方法

注意：如果你在組件的底部寫

<pre>
{{sort?.active|json}} {{sort?.direction|json}}
</pre>

您可以看到值如何變化

一個丑陋的堆棧閃電戰