Angular Dynamic Component Creation 不渲染動態子組件

Question

我們構建了一個相當花哨的動態組件創建框架來構建基於 json 數據的復雜表單。 我們有通過創建的組件

const questionComponent = FieldComponentMap[childField.shortName];    
viewContainerRef.createComponent<QuestionComponent>(questionComponent);

這些組件可能會創建自己的子組件，等等等等。這一切都非常優雅，我們喜歡這種設計。 我們已經讓整個事情“工作”了，但它運作得並不好。 子組件或孫子組件通常不會在頁面上發生更改之前第一次呈現。 我敢肯定我們只是遺漏了一些簡單的東西，但我們可以用更多的眼睛來幫助我們找出我們做錯了什么。

我們已經嘗試將所有動態組件的創建從 ngOnInit 移到 ngAfterContentInit 中，但這並沒有幫助。 我們顯然希望立即呈現完整的表單。

這是一個 StackBlitz 演示我們的問題（從我們的框架大大簡化）...... StackBlitz

Answer 1

我認為你迷失在層次結構中。

更FormGroup ，您在

數組問題包裝器.component.ts

嘗試更換

this.createChildQuestionComponents(this.formGroup);

和

this.createChildQuestionComponents(this.formGroup.get(
     [this.formArrayName, this.formArrayIndex]) as FormGroup);

分叉的 Stackblitz

另外的選擇

使用動態創建表單時，您不需要使用formGroup 、 formArrayName指令包裝所有ng-template 。 無論如何，它們與您的孩子動態創建的控件無關。

所以：

父數組question.component.ts

代替

componentRef.instance.containingControl = this.formGroup;

和

componentRef.instance.containingControl = arrayItem;

數組問題包裝器.component.ts

模板應該是：

<div class="child-questions">
  <ng-template appQuestionHost></ng-template>
</div>

或者只是<ng-template appQuestionHost></ng-template>如果您在這里不需要任何其他類，或者您可以使用主機元素對其進行樣式設置。

分叉的 Stackblitz 2

Answer 2

我遇到了在動態添加的組件中實例化的模板門戶的問題。 設置超時以在動態創建的組件中關聯模板門戶修復它。 我對此並不完全滿意。 但是，它可能會提示您的控件為什么不被識別。