0

我有一个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>

上面的代码有效，但以错误的顺序呈现组件

4

1 回答 1

0

如果你有各种各样的孩子，*ngIf="block.type === fielType.Block"你可以简单地<app-document-form-node [block]="block.children"></app-document-form-node>在你的第一个末尾添加ng-container。

<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>
    <app-document-form-node [block]="block.children"></app-document-form-node>
</ng-container>
于 2020-08-13T20:49:34.890 回答