Angular 12 - 双向数据绑定和触发器

问题描述

这更像是一个问题，那么我是否有可能出错。 这是我目前的情况：

1. 我在“网格”系统上有一个项目。
   

   

2. 当保存按钮在那里时，项目可以跨越多行和多列，在位置锁定到位后出现。保存按钮在点击后无法重复使用。
3. 想法是在对话框上有两个可更改的值，用于更改字段的当前跨度。
   

   

4. 我已经实现了（我有两个输入字段，可以将数据保存到它们和网格中的相应元素中），但是我无法思考如何在关闭对话框后“触发”跨度的更改。
   我有一个组件作为网格组件（文本框组件）的一个组件，其中有一个子对话框组件。因此，当关闭对话框时，它在文本框组件上“结束”，而不是在我应该实际更改跨度的网格组件中。
   
   有没有办法触发网格（[grand] 父组件）上的某些内容以更改子组件（文本框组件上的 afterClose() 事件）？

解决方法

您可以尝试的第一件事是通过 dialog.afterClose().subscribe(result ...) 传递更新的项目，包括新的 colX 和 colY 值，然后将更新的项目向下传递给您的 TextBoxComponent。

检查最后一个例子： https://material.angular.io/components/dialog/examples。

如果您想对属性更改做出反应，请查看 OnChanges 界面，这也可能会有所帮助：https://angular.io/api/core/OnChanges

但是
我想这里的首选方法是将来自诸如 @ngrx/store 之类的商店的项目提供给您的文本框，并通过操作流与您的项目集合进行通信。从您的模态中分派 UpdateItemAction，整个网格始终会适应您当前的集合状态。

类似的东西

<box-grid>
   <text-box [item]="item" *ngFor="let item of items$ | async"></text-box>
</box-grid>

此外，我不建议为每个文本框生成模态。只需打开一个模态（延迟加载）并将项目实体传递给数据属性：

@Component({
  selector: 'edit-item-dialog',template: 'passed in {{ data.item.colX }}',})
export class EditItemDialog {
  constructor(
    private store: Store,@Inject(MAT_DIALOG_DATA) public data: { item: Item }
   ) { }

  // Dispatch your update action here and close the modal
  updateItem(item: Item): void {
    this.store.dispatch(updateItem( { item } ));
    // close dialog

  }
}

希望这会有所帮助，我已解决您的问题。