Angular中如何条件性添加cdkDrag指令？

你之前尝试的方法无效，是因为cdkDrag是Angular属性型指令，而非普通HTML属性：

• 使用[attr.cdkDrag]只会添加/移除DOM属性，不会影响Angular指令的挂载逻辑
• 插值绑定cdkDrag="{{...}}"只是设置属性值，指令依然会被Angular识别并初始化

下面给出两种可行方案：

方案1：完全添加/移除指令（条件渲染） #

如果需要在canDragAndDrop为false时彻底移除cdkDrag指令，可以用*ngIf配合模板复用内容，避免重复代码：

public canDragAndDrop: boolean = true; // 可切换true/false控制指令存在

<!-- 定义复用的内容模板 -->
<ng-template #dragContent>
  这里是你的元素内容
</ng-template>

<!-- 条件渲染带指令的元素 -->
<ng-container *ngIf="canDragAndDrop; else noDrag">
  <div cdkDrag *ngTemplateOutlet="dragContent"></div>
</ng-container>

<!-- 条件渲染不带指令的元素 -->
<ng-template #noDrag>
  <div *ngTemplateOutlet="dragContent"></div>
</ng-template>

方案2：禁用拖拽功能（保留指令） #

如果只是需要控制元素是否可拖拽，不需要完全移除指令，推荐使用CDK Drag自带的cdkDragDisabled输入属性，这是更简洁的实现方式：

public canDragAndDrop: boolean = true;

<div cdkDrag [cdkDragDisabled]="!canDragAndDrop">
  这里是你的元素内容
</div>

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