Angular 将子组件的输入与父级同步。许多著作

我的组件结构如下所示：

主要成分 子组件 中间成分 使用组件 主组件具有从ngrx存储填充的变更集对象。出于性能原因，我希望所有输入组件与变更集同步，保存按钮后，变更集将应用于ngrx存储

我应该使用哪个角度特性，以双向数据绑定方式将所有组件连接到变更集

带有child->parent的示例

带有子->父代的示例。为了实现这一点，我应该复制事件发射器，我认为这不是最好的方法

一个可以考虑的解决方案是@ CGCAK提到的反应形式，但在底部传递值仍然存在问题。

在我的例子中，模板不像这样：

<form [formGroup]="form">
  <input type="text" formControlName="mainInput">
  <div formGroupName="childGroup">
    <input type="text" formControlName="childInput"
  </div>
</form>

<form [formGroup]="form">
  <input type="text" formControlName="mainInput">
  <div formGroupName="childGroup">
    <child-that-has-input> type="text" formControlName="childInput"
  </div>
</form>

但大致是这样的：

<form [formGroup]="form">
  <input type="text" formControlName="mainInput">
  <div formGroupName="childGroup">
    <input type="text" formControlName="childInput"
  </div>
</form>

<form [formGroup]="form">
  <input type="text" formControlName="mainInput">
  <div formGroupName="childGroup">
    <child-that-has-input> type="text" formControlName="childInput"
  </div>
</form>

甚至在现实中：

<form [formGroup]="form">
  <input type="text" formControlName="mainInput">
  <div formGroupName="childGroup">
    <child-that-has-child-which-as-input type="text" formControlName="childInput"
  </div>
</form>

---

您可以在输入组件的init生命周期中，对来自存储区的填充值集使用反应式表单

theReativeForm=新的fb.group{ changeSetOfValues:新的fb.array[] }; ... 奥尼特{ const changeState$=this.store.selectstate=>state.changeState； changeState$.subscribevalues=> values.forEachvalue=> 这是一张表格 .get'changeSetOfValues' .pushthis.fb.controlvalue； ; } 然后侦听表单中的每个更改，以与存储中的状态同步

this.TherativeForm.get'changeSetOfValues'。valueChangesvaluesFormArray=> 您的UpdateStateDeducerMethodValuesformarray.value； ;

---

@我想澄清一下。我有两个或多个具有相同数据源的文件，因此它们在键入单个字符时应立即刷新。所以我不想把每个角色都推到商店里。我想将更改保留在存储区之外，直到单击“保存”按钮。然后不要使用“值更改”，而是将值保留为被动形式，然后让每个更改自动绑定到输入。毕竟，它是被动的权利，给出一个保存按钮的动作，比如UpdateStateDeducerMethodValuesformarray.value；好的，我明白了。使用反应式表单是否允许我拥有指向同一数据源的重复控件？尽管如此，我在将FormGroup从父级传递给子级时遇到了问题，而子级是。这和我面对的其他方法差不多