如何订阅父级SortDirective的sortChange EventEmitter事件？

AI 小北

2026-8-18

解决方案

你可以通过以下步骤实现需求：

在自定义指令中声明自定义事件发射器
在AbxCustomSortDirective里添加一个新的@Output()属性，用于向外传递排序变更事件：

import { Directive, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { SortDirective, Sort } from '第三方库路径';

@Directive({
  selector: '[customSort]'
})
export class AbxCustomSortDirective extends SortDirective implements OnInit, OnDestroy {
  // 自定义输出事件，供组件订阅
  @Output() customSortChange = new EventEmitter<Sort[]>();
  // 保存订阅对象，用于销毁时取消订阅
  private sortSubscription: any;

  ngOnInit(): void {
    // 调用父类的ngOnInit确保初始化逻辑正常执行
    super.ngOnInit();
    // 订阅父类的sortChange事件
    this.sortSubscription = this.sortChange.subscribe((sortData: Sort[]) => {
      // 触发自定义事件，传递排序数据
      this.customSortChange.emit(sortData);
    });
  }

  ngOnDestroy(): void {
    // 调用父类的ngOnDestroy
    super.ngOnDestroy();
    // 取消订阅，防止内存泄漏
    if (this.sortSubscription) {
      this.sortSubscription.unsubscribe();
    }
  }
}

在组件中使用自定义指令并订阅事件
在组件模板里使用[customSort]指令，并通过(customSortChange)订阅自定义事件：

<!-- 组件模板 -->
<table [customSort] (customSortChange)="handleSortChange($event)">
  <!-- 表格内容 -->
</table>

在组件类中实现事件处理方法：

import { Component } from '@angular/core';
import { Sort } from '第三方库路径';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  handleSortChange(sortData: Sort[]) {
    // 处理排序变更逻辑
    console.log('排序变更:', sortData);
  }
}