角反应形式-FormArray ChangeDection onPush不起作用

时间:2020-05-29 12:18:30

标签: angular rxjs angular-reactive-forms angular-forms rxjs-observables

我们在所有组件中都使用ChangeDetectionStrategy Onpush,因此我们遵循转储/智能组件方法,因此将所有逻辑部分保留在服务/外观方面。

现在,我们需要使用Reactive Forms,FormGroup,FormArray,

生成动态控件

因此,我们正在服务端准备FormGroup和FormArray,并将它们作为输入参数传递给转储组件,在这种情况下,我无法将它们作为行为主体以可见的方式传递,我直接作为输入参数传递。

如果FormArray中发生任何更改,则由于OnPush changeDectionStrategy而不会反映在转储组件中。

我在此stackblitz

中嘲笑了实现

在此示例中,我已经在服务文件中准备了FormArray,FormGroup,并通过智能组件传递给转储组件。

我在行为主题和抽象控件上找不到合适的样本,

如果可以将FormArray,FormGroup传递为Observable,请帮助我知道。

1 个答案:

答案 0 :(得分:0)

在stackblitz示例中,即使从Layer-Container组件也未定义FormGroup和FormArray,因为变量是在加载初始数据之前从服务中获取的。如果这样做,然后获取服务变量并将其传递给子组件,则将获得这些值。

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { LayerService } from '../layer.service';

@Component({
  selector: 'app-layer-container',
  templateUrl: './layer-container.component.html',
  styleUrls: ['./layer-container.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LayerContainerComponent implements OnInit {
layerFormGroup ;
layerFormArray ;

  constructor(private service : LayerService) { 
    this.service.loadInitialData();
    this.layerFormGroup = this.service.layerFormGroup;
    this.layerFormArray = this.service.layerFormArray; 
  }

  ngOnInit() {
    this.service.loadInitialData();
  }

}

并且由于FormArray和FormGroup都不是原始数据类型,因此@Input()无法识别更改,并且我们很可能将无法检测到更改。传递这些变量的新引用可能就可以解决问题。