角 10 |动态组件中的FormControl

Posted 2023-02-22

【中文标题】角 10 |动态组件中的FormControl

【英文标题】：Angular 10 | FormControl in Dynamic Component

【发布时间】：2020-11-28 12:44:20

【问题描述】：

我正在尝试解决一个简单的任务：动态加载一个包含表单控件的组件。 一切都很好，除了我收到这样的错误：

错误错误：ExpressionChangedAfterItHasBeenCheckedError：表达式 检查后有变化。以前的值：'未定义'。 当前值：'[object Object]'。好像景色已经 在其父项及其子项进行脏检查后创建。已 它是在变更检测挂钩中创建的吗？

我以规范的方式加载组件 - 在带有 ComponentFactoryResolver 和 ViewContainerRef 的 ngAfterViewInit 钩子中。

我尝试用谷歌搜索这个问题并在这里搜索，但我没有找到任何明确的解释为什么会这样以及如何解决它。

我是 Angular 新手，我可能会以错误的方式提问。

我已经准备好了an example about it

提前致谢！

【问题讨论】：

为什么你注释掉这部分<!--<app-my-form></app-my-form>-->un-comment 并使用它这是最好的方法

你可以查看这个帖子***.com/a/42760546/10842900

@KamranKhatti 嗨，非常感谢您的回答！但如果我不需要从模糊数量的组件中动态加载组件，那将是最好的解决方案。

@Indraraj26 非常感谢这个链接！它帮助我解决了我的麻烦。 P.S.：这对我来说真的很奇怪，Angular 文档 (angular.io/guide/dynamic-component-loader) 对此只字未提。

【参考方案1】：

其实我不知道为什么会出现这种错误，但是setTimeout可以解决你的问题。

setTimeout(() => 
      let factory = this.compFactoryResolver.resolveComponentFactory(MyFormComponent);
      let compRef = this.formSlotRef.createComponent(factory);
);

另一种方法是使用OnPush变化检测策略。它不会自动检测您的更改，但您将在检查view 并添加您的组件后触发检测。

@Component(
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  changeDetection: ChangeDetectionStrategy.OnPush
)
export class AppComponent 
  name = "Angular " + VERSION.major;

  @ViewChild("formSlot",  read: ViewContainerRef )
  private formSlotRef: ViewContainerRef;

  constructor(
    private compFactoryResolver: ComponentFactoryResolver,
    private cdr: ChangeDetectorRef
  ) 

  ngAfterViewInit() 
    let factory = this.compFactoryResolver.resolveComponentFactory(
      MyFormComponent
    );
    let compRef = this.formSlotRef.createComponent(factory);
    this.cdr.detectChanges();
  

【讨论】：

@Indraraj26，哪种解决方案？

当您在 setTimeout 中包装任何内容时，这会触发额外的更改检测，我们需要找到导致快速更改错误的真正问题

是的，所以也添加了另一个解决方案来手动检查检测

这也将调用额外的更改检测。这是由于儿童中的 [formControl] 造成的

让工厂 = this.compFactoryResolver.resolveComponentFactory(MyFormComponent);让 compRef = this.formSlotRef.createComponent(factory); compRef.changeDetectorRef.detectChanges() ，这也解决了错误