1

我有一个容器组件，它订阅 @ngrx/store 并呈现内部具有表单的组件列表。组件层次结构如下：

// orders-list.component.ts

export class OrdersListComponent {

  // more stuff
  
  ngOnInit() {
    this.orders$ = this.store.pipe(
      select(orderSelectors.selectAll)
    );
  }
  
  onOrderChange(id, changes) {
    this.store.dispatch(
      new OrderUpdateAction(id, changes);
    );
  }
}

// order.component.ts

export class OrderComponent {

  @Input() orderData;
  @Output() orderChange = new EventEmitter();

  // more stuff
  
  constructor() {
    this.form = this.formBuilder.group({ ... });
  }
  
  ngOnInit() {
    this.form.valueChanges.subscribe(value => {
      this.orderChange.emit(value);
    });
  }
  
  ngOnChanges() {
    this.form.patchValue(this.orderData);
  }

}
<orders-list>
  <order 
    *ngFor="let order of orders$ | async"
    [orderData]="order"
    (orderChange)="onOrderChange(order.id, $event)">
  </order>
</orders-list>

想法很简单。当表单的值发生变化时，内部组件会发出一个事件。外部组件使用来自事件的数据并将操作分派到商店，该商店更新实体并将更新的实体传递回内部组件。然后内部组件使用它来修补表单的值。

问题是每次表单字段更改时，元素都会失去焦点。如果有输入框或选择框或任何可能的表单控件，则在每次调度时元素都会失去焦点。

任何帮助表示赞赏！

4

0 回答 0