Angular中Draggable指令无法获取DraggingHandlerDirective实例问题

问题根源 #

• DraggableDirective 通过 hostDirectives 挂载在 app-my-widget 的宿主元素（即 <app-my-widget> 标签）上。
• 指令中的 @ContentChild 仅能查找宿主元素的内容投影区域（也就是 <app-my-widget> 标签包裹的外部传入内容，比如示例里的 <p component>Test 1</p>），无法访问 app-my-widget 自身内部模板中的元素/指令。
• 带有 dragging-handler 的 div 属于 app-my-widget 内部模板的内容，不属于投影区域，因此 DraggableDirective 用 @ContentChild 无法找到它。

解决方案 #

方案一：调整指令挂载位置（推荐） #

将 DraggableDirective 直接挂载到 app-my-widget 内部的容器元素上，使其能通过 @ContentChild 访问同一模板内的 dragging-handler。

1. 修改 app-my-widget 的 HTML 模板：

<div class="widget-container" draggable [boundary]="boundary">
    <div class="drag-handle" dragging-handler></div>
    <div class="content">
        <ng-content select="[component]"></ng-content>
    </div>
    <div class="resize-handle" resize-handler></div>
</div>

2. 修改 app-my-widget 组件代码：

import { Component, Input } from '@angular/core';
import { DraggableDirective } from './path-to-draggable.directive';
import { DraggingHandlerDirective } from './path-to-dragging-handler.directive';

@Component({
  selector: 'app-my-widget',
  standalone: true,
  imports: [DraggableDirective, DraggingHandlerDirective], // 导入所需指令
  templateUrl: './my-widget.component.html',
  styleUrl: './my-widget.component.scss'
})
export class MyWidgetComponent {
  @Input() boundary!: string; // 接收父组件传入的边界值
}

3. 父组件 Dashboard 的模板无需修改，保持原样即可。

此时 DraggableDirective 的宿主是内部 .widget-container，@ContentChild(DraggingHandlerDirective) 就能正确找到同一模板内的拖拽手柄指令实例。

方案二：通过组件传递手柄引用（保留宿主指令挂载方式） #

如果必须将 DraggableDirective 保留在 app-my-widget 的宿主元素上，可以通过组件中转手柄引用：

1. 修改 app-my-widget 组件代码：

import { Component, Host, ViewChild, AfterViewInit } from '@angular/core';
import { DraggableDirective } from './path-to-draggable.directive';
import { DraggingHandlerDirective } from './path-to-dragging-handler.directive';

@Component({
  selector: 'app-my-widget',
  standalone: true,
  imports: [DraggingHandlerDirective], // 导入模板中使用的指令
  hostDirectives: [
    {
      directive: DraggableDirective,
      inputs: ['boundary'],
    },
  ],
  templateUrl: './my-widget.component.html',
  styleUrl: './my-widget.component.scss'
})
export class MyWidgetComponent implements AfterViewInit {
  @ViewChild(DraggingHandlerDirective) internalDragHandle!: DraggingHandlerDirective;

  constructor(@Host() private draggableDirective: DraggableDirective) {}

  ngAfterViewInit() {
    // 将内部模板中的手柄指令实例传递给宿主上的拖拽指令
    this.draggableDirective.handle = this.internalDragHandle;
    this.draggableDirective.handleElement = this.internalDragHandle.elementRef.nativeElement;
  }
}

2. 修改 DraggableDirective 代码，移除 @ContentChild，改为普通属性：

import { Directive } from '@angular/core';
import { DraggingHandlerDirective } from './path-to-dragging-handler.directive';

@Directive({
  selector: '[draggable]',
  standalone: true
})
export class DraggableDirective {
  handle!: DraggingHandlerDirective;
  handleElement!: HTMLElement;

  // 其他拖拽逻辑代码...
}

这样就能通过组件的 AfterViewInit 钩子，将内部模板的手柄指令实例传递给宿主上的拖拽指令，解决 handle 为 undefined 的问题。

内容的提问来源于stack exchange，提问作者Jose Raul Perera