PrimeNG：如何识别嵌套模板中被拖动的p-splitter-gutter-handle

在嵌套<p-splitter>的场景里，多个p-splitter-gutter-handle手柄共存时，可通过以下方式实时判断当前被拖动的手柄：

• 给Splitter添加自定义标识，通过事件传递
  给每个层级的Splitter设置唯一标识，在拖动事件中传入该标识，直接关联到对应的手柄：

  HTML代码示例：

  <p-splitter [style]="{'height': '400px'}" (onDragStart)="handleDrag($event, 'parent-splitter')">
    <ng-template pTemplate>
      <div class="p-col p-d-flex p-ai-center p-jc-center">父级左侧面板</div>
    </ng-template>
    <ng-template pTemplate>
      <p-splitter orientation="vertical" [style]="{'height': '100%'}" (onDragStart)="handleDrag($event, 'child-vertical-splitter')">
        <ng-template pTemplate>
          <div class="p-col p-d-flex p-ai-center p-jc-center">子级顶部面板</div>
        </ng-template>
        <ng-template pTemplate>
          <div class="p-col p-d-flex p-ai-center p-jc-center">子级底部面板</div>
        </ng-template>
      </p-splitter>
    </ng-template>
  </p-splitter>
  

  组件类处理逻辑：

  handleDrag(event: any, splitterId: string) {
    const handle = event.originalEvent.target.closest('.p-splitter-gutter-handle');
    if (handle) {
      console.log(`当前拖动的是【${splitterId}】对应的手柄`);
      // 这里可根据splitterId执行对应业务逻辑
    }
  }
  

• 通过DOM层级关系自动识别
  无需手动加标识，利用DOM的层级关联，从手柄元素向上查找所属的Splitter组件，通过组件属性区分：

  组件类处理逻辑：

  handleDrag(event: any) {
    const handle = event.originalEvent.target.closest('.p-splitter-gutter-handle');
    const parentSplitter = handle.closest('p-splitter');
    const orientation = parentSplitter.getAttribute('orientation');
    const isNested = parentSplitter.parentElement.closest('p-splitter') !== null;
  
    if (isNested && orientation === 'vertical') {
      console.log('正在拖动垂直方向的嵌套手柄');
    } else if (!isNested) {
      console.log('正在拖动父级水平方向手柄');
    }
  }
  

内容的提问来源于stack exchange，提问作者Nek90