Angular 10|动态组件中的FormControl

Question

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

错误错误：ExpressionChangedAfterItHasBeenCheckedError:表达式检查后已更改。上一个值："未定义"。当前值："[object object]"。看起来这种观点在对其父级及其子级进行脏检查后创建。有它是在变更检测挂钩中创建的？

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

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

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

我准备了一个关于的例子

提前感谢！

Answer 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();
}
}