我有一个app-document-form-node递归构建组件的组件。
组件应用程序文档表单节点：
<ng-container *ngIf="block.type === fielType.Block">
<app-adresat-list *ngIf="block.tag === 'ADRESATS'" [list]="block?.children"></app-adresat-list>
<app-word-settings *ngIf="block.tag === 'WORD_SETTINGS'" [element]="block"></app-word-settings>
<app-parameters *ngIf="block.tag === 'PARAMETERS'" [element]="block"></app-parameters>
<app-document-parameters *ngIf="block.tag === 'GENERICPARAMETERS'" [element]="block"></app-document-parameters>
</ng-container>
<!----->
<ng-container *ngIf="block.type === fielType.Field">
<app-field [ismultisignator]="properties?.ismultisignator" [fieldDefinition]="block" (onSelected)="onFieldSelected($event)"></app-field>
</ng-container>
<!----->
<ng-container *ngIf="block.type === fielType.Table">
<app-postaddress *ngIf="block.tag === 'TAG_ADDR'" [element]="block"></app-postaddress>
</ng-container>
<!--------------->
<div class="children" *ngIf="block?.children && block.children.length">
<ng-template ngFor let-child [ngForOf]="block.children">
<app-document-form-node [block]="child" [properties]="properties"></app-document-form-node>
</ng-template>
</div>
问题在部分<ng-container *ngIf="block.type === fielType.Block"></ng-container>。
当它发生时，所有子组件都应该放在组件中<app-adresat-list，，，，<app-word-settings>以防万一。<app-parameters>app-document-parametersblockchildren
现在它可以工作了，但毕竟上面提到的组件：
<div class="children" *ngIf="block?.children && block.children.length"></div>
结果if block.type === fielType.Block它呈现一个特定的组件，然后在外面呈现他的孩子。但是如果存在子元素，它应该在具体组件中呈现。
如何解决？
我的主要范围是递归显示组件，但根据条件显示不同的组件*ngIf="block.tag。
作为解决方案：
我可以在, ,<app-document-form-node>的模板中添加，但它会调用循环依赖组件错误。<app-adresat-list<app-word-settings><app-parameters>app-document-parameters
另一个假设<ng-template #children>是在每个组件中使用参考和投影：
<ng-container *ngIf="block.type === fielType.Block">
<app-adresat-list *ngIf="block.tag === 'ADRESATS'" [list]="block?.children">
<ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
</app-adresat-list>
<app-word-settings *ngIf="block.tag === 'WORD_SETTINGS'" [element]="block">
<ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
</app-word-settings>
<app-parameters *ngIf="block.tag === 'PARAMETERS'" [element]="block">
<ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
</app-parameters>
<app-document-parameters *ngIf="block.tag === 'GENERICPARAMETERS'" [element]="block">
<ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
</app-document-parameters>
</ng-container>
<!----->
<ng-container *ngIf="block.type === fielType.Field">
<app-field [ismultisignator]="properties?.ismultisignator" [fieldDefinition]="block" (onSelected)="onFieldSelected($event)"></app-field>
</ng-container>
<!----->
<ng-container *ngIf="block.type === fielType.Table">
<app-postaddress *ngIf="block.tag === 'TAG_ADDR'" [element]="block"></app-postaddress>
</ng-container>
<!--------------->
<ng-template #children let-block="block">
<ng-container *ngIf="block?.children">
<ng-container *ngFor="let child of block.children">
<app-document-form-node [block]="child"></app-document-form-node>
</ng-container>
</ng-container>
</ng-template>
上面的代码有效，但以错误的顺序呈现组件