ng-template和ng-container的嵌套使用

时间:2022-07-26
本文章向大家介绍ng-template和ng-container的嵌套使用，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

源代码：

<h4>Jerry: {{position}}</h4>
<div *ngIf="components[0]">
<h5>Component uid: {{ components[0].uid }}</h5>
<h6>Type code: {{ components[0].typeCode }}</h6>
</div>
<h4>end</h4>
<ng-template
  [cxOutlet]="position"
  [cxOutletContext]="{ components$: components$ }"
>
<div>before ng-template</div>
  <ng-template
    *ngFor="let component of components"
    [cxOutlet]="component.flexType"
    [cxOutletContext]="{ component: component }"
    [cxOutletDefer]="getComponentDeferOptions(component.flexType)"
    (loaded)="isLoaded($event)"
  >
  <div>before ng-container,type: {{ component.flexType}}</div>
    <ng-container [cxComponentWrapper]="component"></ng-container>
  <div>after ng-container</div>
  </ng-template>
<div>after ng-template</div>
</ng-template>

随机文章
本站知识点必读
最近更新