如何在 Angular 中动态创建可拖拽组件并支持自定义属性配置

本文介绍如何使用 angular + cdk drag & drop + reactive forms 实现：点击按钮弹出表单，输入组件名称、描述、类型，并动态添加属性（含默认值与数据类型），最终将新组件渲染到拖拽面板中。

在构建可视化低代码平台或流程编排工具时，常需支持用户动态创建可复用的 UI 组件，并将其拖入画布。Angular 提供了强大的响应式表单（Reactive Forms）与 @angular/cdk/drag-drop 模块，结合 Taiga UI（如 tuiDialog、tuiSelect）可快速搭建专业级交互界面。

✅ 核心功能实现要点

1. 弹窗表单：使用 tuiDialog 管理状态

通过 [(tuiDialog)]="open" 双向绑定控制模态框显隐，配合 tuiDialogOptions 设置标题与尺寸。表单采用 FormGroup 管理字段状态：

exampleForm = new FormGroup({
  nameOfComponent: new FormControl('', [Validators.required]),
  description: new FormControl(''),
});

⚠️ 注意：formControlName 必须与 FormGroup 中的键名严格一致，否则无法双向绑定。

2. 动态属性管理：使用 FormArray

每个组件可拥有多个属性（如 defaultValue、type），推荐用 FormArray 统一管理：

// 在 ngOnInit() 中初始化
this.DragAndDropForm = new FormGroup({
  name: this.exampleForm.get('nameOfComponent'),
  description: this.exampleForm.get('description'),
  componentType: new FormControl(this.chosenComponent),
  attributes: new FormArray([]) // ? 关键：空数组承载属性组
});

// 添加新属性方法
addAttribute() {
  const attrGroup = new FormGroup({
    defaultValue: new FormControl('', Validators.required),
    type: new FormControl('int', Validators.required)
  });
  (this.DragAndDropForm.get('attributes') as FormArray).push(attrGroup);
}

对应 HTML 中使用 *ngFor 渲染：

  
  
    
      int
      float
      string
    
  

3. 拖拽区域：CDK 集成与组件渲染

利用 cdkDropList 和 cdkDrag 实现拖拽容器与可拖拽项。关键点：新组件需以 形式动态插入对应分类下的 内部。

示例（动态追加“Kraftwerk”组件）：

// 在 submitComponent() 中保存后执行
const newComponent = {
  id: Date.now(),
  name: this.exampleForm.value.nameOfComponent,
  description: this.exampleForm.value.description,
  type: this.chosenComponent,
  icon: '⚡', // 或 SVG 字符串
  attributes: this.DragAndDropForm.get('attributes').value
};

// 将 newComponent 推入对应 category 的组件列表（如 this.einspeiserComponents）
this.einspeiserComponents.push(newComponent);

并在模板中循环渲染：

  Einspeiser
  
    
      
      {{ comp.name }}
    
  

4. 后端对接与数据持久化

submitComponent(): void {
  if (this.DragAndDropForm.invalid) return;

  const payload = {
    ...this.exampleForm.value,
    type: this.chosenComponent,
    attributes: this.DragAndDropForm.get('attributes').value
  };

  this.apiService.postComponent(payload).subscribe({
    next: res => {
      console.log('✅ Component saved:', res);
      this.open = false; // 关闭弹窗
      this.resetForm();  // 重置表单
    },
    error: err => console.error('❌ Save failed:', err)
  });
}

private resetForm(): void {
  this.exampleForm.reset();
  this.chosenComponent = this.componentTypes[0];
  (this.DragAndDropForm.get('attributes') as FormArray).clear();
}