将 child 组件的输入与 grand parent 同步。许多迹象

Question

我的组件结构如下：

主要成分
- 子组件
  - 中间组件
    - 与 <input> 组件

主要组件有 changeset object 并从 ngrx 商店填充。出于性能原因，我希望所有 with the input components 与 changeset 同步，并且在 save button 之后 changeset 将应用于 ngrx store

我应该使用哪个 angular 功能，以 two-way 数据绑定方式将所有 <input> 组件连接到 changeset。

示例 child -> parent

https://stackblitz.com/edit/angular-ivy-bseiyd?file=src%2Fapp%2Fchild.component.ts

示例 child -> grand parent。为了完成这项工作，我应该复制事件发射器，我认为这不是最好的方法。

https://stackblitz.com/edit/angular-ivy-a13ztp?file=src%2Fapp%2Fchild.component.ts

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

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

<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>

Answer 1

您可以在输入组件的初始生命周期中对来自存储的填充值集使用反应形式。

theReativeForm = new fb.group({
   changeSetOfValues: new fb.array([])
});
...
onInit() {
   const changeState$ = this.store.select(state => state.changeState);
   changeState$.subscribe(values => 
      values.forEach(value => 
         this.theReativeForm
           .get('changeSetOfValues')
           .push(this.fb.control(value)));
   );
}

然后监听表单中的每个更改以同步到存储中的状态，

this.theReativeForm.get('changeSetOfValues').valueChanges(valuesFormArray =>
   yourUpdateStateReducerMethod(valuesFormArray.value);
);

将 child 组件的输入与 grand parent 同步。许多迹象

Synchronize child component's input with grand parent. Many indirations

ngrx

angular