如何在angular typescript中自定义拖动模式下的reorderHandle或如何隐藏它

<div reorderHandle>
  <!-- 拖动元素的内容 -->
</div>

import { Directive } from '@angular/core';

@Directive({
  selector: '[reorderHandle]'
})
export class ReorderHandleDirective {
  // 在这里可以添加自定义逻辑
}

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[reorderHandle]'
})
export class ReorderHandleDirective {
  constructor(private elementRef: ElementRef) {}

  @HostListener('dragstart', ['$event'])
  onDragStart(event: DragEvent) {
    // 隐藏拖动模式下的reorderHandle
    this.elementRef.nativeElement.style.display = 'none';
  }

  @HostListener('dragend', ['$event'])
  onDragEnd(event: DragEvent) {
    // 恢复拖动模式下的reorderHandle的显示
    this.elementRef.nativeElement.style.display = '';
  }
}

import { NgModule } from '@angular/core';
import { ReorderHandleDirective } from './reorder-handle.directive';

@NgModule({
  declarations: [
    ReorderHandleDirective
  ],
  // 其他模块配置...
})
export class AppModule { }