在 Angular 的表头中使用 FontAwesome 图标

Question

我正在尝试将sort、sortUp 和sortDown 图标设置为我的表格标题，遵循table tutorial from ng-bootstrap。

有一个NgbdSortableHeader 指令可以改变列的排序：

@Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()'
  }
})
export class NgbdSortableHeader {
  @Input() sortable: string = '';
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();

  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({column: this.sortable, direction: this.direction});
  }
}

以及拥有表格的组件：

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss'],
  providers: [UserService]
})
export class UsersComponent implements OnInit {
  faSort = faSort;
  faSortUp = faSortUp;
  faSortDown = faSortDown;

  users$: Observable<User[]>;
  total$: Observable<number>;

  @ViewChildren(NgbdSortableHeader) headers!: QueryList<NgbdSortableHeader>;

  constructor() {
  }

  ngOnInit(): void {
  }

  onSort({column, direction}: SortEvent) {
    // resetting other headers
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });


    this.service.sortColumn = column;
    this.service.sortDirection = direction;
  }
}

我想知道是否有办法访问当前列排序顺序并替换项目中的图标或隐藏它们。

<th scope="col" sortable="firstName" (sort)="onSort($event)">
  Name
  <fa-icon [icon]="faSort"></fa-icon>
  <fa-icon [icon]="faSortUp"></fa-icon>
  <fa-icon [icon]="faSortDown"></fa-icon>
</th>

Answer 1

我能够通过在排序指令中使用@ChildComponent 来解决我的问题：

<th scope="col" sortable="firstName" (sort)="onSort($event)">
  Name
  <fa-icon [icon]="faSort" size="lg"></fa-icon>
</th>

import { Directive, EventEmitter, Input, Output, ViewChild, ContentChild, ElementRef } from "@angular/core";
import { FaIconComponent } from "@fortawesome/angular-fontawesome";
import { faSort, faSortUp, faSortDown } from "@fortawesome/pro-regular-svg-icons";

export type SortDirection = 'asc' | 'desc' | '';
const rotate: {[key: string]: SortDirection} = { 'asc': 'desc', 'desc': '', '': 'asc' };

export interface SortEvent {
  column: string;
  direction: SortDirection;
}

@Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()'
  }
})
export class NgbdSortableHeader {
  @Input() sortable: string = '';
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();

  @ContentChild(FaIconComponent) sortIcon?: FaIconComponent;

  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({column: this.sortable, direction: this.direction});

    if (this.sortIcon !== undefined)
    {
        this.sortIcon.icon = this.direction === 'asc' ? faSortDown : this.direction === 'desc' ? faSortUp : faSort;
        this.sortIcon.render();
    }
  }
}