如何实现Angular Sorting指令简化列表排序的路由与图标控制

嘿，我刚好做过类似的Angular自定义指令，完美解决你说的重复逻辑问题！下面一步步教你实现这个简洁的表头排序指令：

1. 创建Sorting指令文件 #

首先新建sorting.directive.ts，我们会注入路由相关服务来处理参数，用Renderer2操作DOM添加图标和事件：

import { Directive, Input, ElementRef, Renderer2, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[sorting]'
})
export class SortingDirective implements OnInit, OnDestroy {
  @Input() sorting!: string; // 接收排序字段名，比如'firstname'
  private routeSub!: Subscription;
  private currentSortField: string | null = null;
  private isDescending: boolean = false;

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit(): void {
    // 订阅路由参数，实时更新当前排序状态
    this.routeSub = this.activatedRoute.queryParams.subscribe((params: Params) => {
      this.currentSortField = params['sort'];
      this.syncSortState();
      this.renderSortIcon();
    });

    // 给a标签绑定点击事件，处理排序切换
    this.renderer.listen(this.el.nativeElement, 'click', (event) => {
      event.preventDefault();
      this.toggleSortDirection();
      this.navigateWithUpdatedSort();
    });
  }

  // 同步当前字段的排序状态
  private syncSortState(): void {
    if (!this.currentSortField) {
      this.isDescending = false;
      return;
    }
    // 判断当前是否是本字段排序，以及是否为降序
    if (this.currentSortField.startsWith(this.sorting)) {
      this.isDescending = this.currentSortField.endsWith('-desc');
    } else {
      this.isDescending = false;
    }
  }

  // 渲染排序图标（这里用Font Awesome举例，可替换成你用的图标库）
  private renderSortIcon(): void {
    // 先移除旧图标，避免重复
    const oldIcon = this.el.nativeElement.querySelector('.sort-icon');
    if (oldIcon) this.renderer.removeChild(this.el.nativeElement, oldIcon);

    const icon = this.renderer.createElement('span');
    this.renderer.addClass(icon, 'sort-icon');

    // 根据当前排序状态添加对应图标类
    if (this.currentSortField === this.sorting) {
      this.renderer.addClass(icon, 'fa', 'fa-sort-up');
    } else if (this.currentSortField === `${this.sorting}-desc`) {
      this.renderer.addClass(icon, 'fa', 'fa-sort-down');
    } else {
      this.renderer.addClass(icon, 'fa', 'fa-sort');
    }

    // 把图标追加到a标签末尾
    this.renderer.appendChild(this.el.nativeElement, icon);
  }

  // 切换排序方向
  private toggleSortDirection(): void {
    if (this.currentSortField === this.sorting) {
      // 当前是升序，切降序
      this.isDescending = true;
    } else if (this.currentSortField === `${this.sorting}-desc`) {
      // 当前是降序，切升序
      this.isDescending = false;
    } else {
      // 之前没按这个字段排，默认升序
      this.isDescending = false;
    }
  }

  // 带着更新后的排序参数跳转路由
  private navigateWithUpdatedSort(): void {
    const newSortParam = this.isDescending ? `${this.sorting}-desc` : this.sorting;
    // 保留其他查询参数（比如分页），只更新sort
    const updatedQueryParams = {
      ...this.activatedRoute.snapshot.queryParams,
      sort: newSortParam
    };

    this.router.navigate([], {
      relativeTo: this.activatedRoute,
      queryParams: updatedQueryParams,
      queryParamsHandling: 'merge'
    });
  }

  // 销毁时取消订阅，防止内存泄漏
  ngOnDestroy(): void {
    this.routeSub?.unsubscribe();
  }
}

2. 在模块中注册指令 #

别忘了在你的功能模块或者根模块里声明这个指令：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { SortingDirective } from './sorting.directive';
import { UserListComponent } from './user-list.component'; // 你的表格组件

@NgModule({
  declarations: [
    UserListComponent,
    SortingDirective
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([/* 你的路由配置 */])
  ]
})
export class AppModule { }

3. 模板里极简使用 #

现在你的模板代码可以写成这样，完全不用重复处理路由和图标逻辑：

<table class="user-table">
  <thead>
    <tr>
      <th><a [sorting]="'firstname'">First Name</a></th>
      <th><a [sorting]="'lastname'">Last Name</a></th>
      <!-- 其他表头字段同理 -->
    </tr>
  </thead>
  <tbody>
    <!-- 你的表格数据行 -->
  </tbody>
</table>

额外优化建议 #

• 图标适配：如果不用Font Awesome，换成Material Icons或者纯CSS箭头都可以，只需要修改renderSortIcon里的类名就行。比如Material Icons可以用material-icons标签，内容写arrow_upward/arrow_downward/sort。
• 样式调整：给.sort-icon加一点CSS让图标和文字对齐：

.sort-icon {
  margin-left: 6px;
  font-size: 0.9em;
  vertical-align: middle;
}

• 参数兼容：如果你的项目里排序参数名不是sort，可以给指令加个@Input()让参数名可配置，更灵活。

这样所有表头的排序逻辑都被封装在指令里，模板代码干净简洁，再也没有重复的sortParams和showFlip逻辑啦！

内容的提问来源于stack exchange，提问作者Per Hornshøj-Schierbeck