[英]How to use improve ng-container condition in Angular?
I have a BlockComponent :我有一个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>
Inside this block I check type and apply the specific component.在这个块中,我检查类型并应用特定组件。 Each components contains the nested blocks.每个组件都包含嵌套块。 To render children blocks in current I recall BlockComponent template using template #children
:要渲染当前的子块,我记得使用模板#children
的BlockComponent模板:
<ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
. <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
。
Reference is:参考是:
<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>
Problem is that I forced to do another ng-container
like as ngif\else
to render items which has not specific type:问题是我被迫做另一个像ngif\else
这样的ng-container
来渲染没有特定类型的项目:
*ngIf="
block.tag != 'ADRESATS' &&
block.tag != 'ADRESAT' &&
"
This part of code you can see above under comment: <!-- ATTENTION Below I use else ng-container -->
.您可以在上面的注释下看到这部分代码: <!-- ATTENTION Below I use else ng-container -->
。
How to improve rendering of nested components?如何改进嵌套组件的渲染?
looks like a case for ngSwitch
, and you can apply structural directives straight to the elements, you don't need the ng-container
...看起来像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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.