Angular中能否通过setAttribute为DOM元素动态添加cdkDrag等属性指令？

Angular的属性指令本质是绑定到Angular编译流程的类实例，只有在模板编译阶段被Angular识别到的指令才会被初始化、挂载对应的逻辑。你通过setAttribute手动给DOM添加cdkDrag属性，只是修改了DOM的属性值，Angular框架不会感知到这个变化，也不会自动实例化CdkDrag指令，所以拖拽功能不会生效。

推荐使用Angular官方提供的DragDrop服务手动创建拖拽实例，替代手动加属性的操作，步骤如下：

1. 从@angular/cdk/drag-drop中导入DragDrop服务
2. 在组件构造函数中注入该服务
3. 调用createDrag方法绑定目标元素，按需配置拖拽边界等参数

完整代码示例：

import { Component, ElementRef, AfterViewInit } from '@angular/core';
import { DragDrop } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-your-component',
  template: `
    <div class="example-boundary">
      <div class="example-box">
        I can only be dragged within the dotted container
      </div>
    </div>
  `
})
export class YourComponent implements AfterViewInit {
  constructor(
    private dragDrop: DragDrop,
    private elRef: ElementRef
  ) {}

  ngAfterViewInit(): void {
    // 获取目标元素和边界元素
    const dragElement = this.elRef.nativeElement.querySelector('.example-box');
    const boundaryElement = this.elRef.nativeElement.querySelector('.example-boundary');
    
    // 创建拖拽实例
    const dragRef = this.dragDrop.createDrag(dragElement);
    // 配置拖拽边界
    dragRef.boundary = boundaryElement;
  }
}

如果是批量生成可拖拽元素，更推荐在模板中使用*ngFor循环，直接绑定cdkDrag指令，符合Angular的声明式开发习惯，也更容易维护。不要使用jQuery直接操作DOM实现Angular项目内的拖拽功能，会脱离Angular的变更检测和生命周期管理，容易出现不可预期的问题。

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