如何在 Angular 中使用 improve ng-container condition？

Question

我有一個BlockComponent ：

<div class="document-block" *ngIf="block.type === fielType.Block">
    <ng-container *ngIf="block.tag === 'ADRESATS'">
            <app-adresat-list [parent]="block" [adresats]="block.children">
                <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
            </app-adresat-list>
        </ng-container>

        <ng-container *ngIf="block.tag === 'ADRESAT'">
            <app-adresat [block]="block">
                <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
            </app-adresat>
        </ng-container>

        <!-- ATTENTION Below I use else ng-container -->

         <ng-container
         <ng-container
        *ngIf="
            block.tag != 'ADRESATS' &&
            block.tag != 'ADRESAT' &&
        ">
        <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
    </ng-container>
</div>

在這個塊中，我檢查類型並應用特定組件。 每個組件都包含嵌套塊。 要渲染當前的子塊，我記得使用模板#children的BlockComponent模板：

<ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container> 。

參考是：

<ng-template #children let-block="block">
    <ng-container *ngIf="block?.children">
        <ng-container *ngFor="let child of block.children">
            <ng-container *ngIf="child.type === fielType.Field && isFieldVisible(child)">
                <app-field
                    [ismultisignator]="properties?.ismultisignator"
                    [fieldDefinition]="child"
                    (onSelected)="onFieldSelected($event)"
                ></app-field>
            </ng-container>
            <ng-container *ngIf="child.type === fielType.Table">
                <app-postaddress *ngIf="child.tag === 'TAG_ADDR'" [element]="child"></app-postaddress>
            </ng-container>
            <app-block [block]="child" [parent]="block" [show]="true"></app-block>
        </ng-container>
    </ng-container>
</ng-template>

問題是我被迫做另一個像ngif\else這樣的ng-container來渲染沒有特定類型的項目：

*ngIf="
 block.tag != 'ADRESATS' &&
 block.tag != 'ADRESAT' &&
"

您可以在上面的注釋下看到這部分代碼： <!-- ATTENTION Below I use else ng-container --> 。

如何改進嵌套組件的渲染？

Answer 1

看起來像ngSwitch的情況，您可以將結構指令直接應用於元素，您不需要ng-container ...

<div class="document-block" 
    *ngIf="block.type === fielType.Block" 
    [ngSwitch]="block.tag">
        <app-adresat-list *ngSwitchCase="'ADRESATS'" [parent]="block" [adresats]="block.children">
            <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
        </app-adresat-list>

        <app-adresat *ngSwitchCase="'ADRESAT'" [block]="block">
            <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
        </app-adresat>


       <ng-container *ngSwitchDefault>
         <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
      </ng-container>
</div>