角度为4/5的条件ng-content

发布时间：2020-12-17 17:06:24 所属栏目：安全来源：网络整理

导读：嗨我想要一些有条件的ng-content实现例如 div ng-content select="[card-icon]"/ng-content/divdiv #body div *ngIf="description.children.length;else newDiv" ng-content select="[card-body]"/ng-content /div div #newDiv ng-content select="[card-bo

嗨我想要一些有条件的ng-content实现
例如

<div>
   <ng-content select="[card-icon]"></ng-content>
</div>
<div  #body>
   <div *ngIf="description.children.length;else newDiv">
      <ng-content select="[card-body]"></ng-content>
   </div>
   <div #newDiv>
      <ng-content select="[card-body]"></ng-content>
   </div>
</div>
<div  style="align-self: end;" #description [ngClass]="{'hide':!(description.children.length)}">
<ng-content select="[card-description]" ></ng-content>
</div>

但#newDiv中没有??投射任何东西.
TIA.

解决方法

您可以使用给定的代码段：

<div *ngIf=description.children.length>
    <ng-container *ngTemplateOutlet="tempOutlet" ></ng-container>
 </div>
 <div *ngIf=!description.children.length>
    <ng-container *ngTemplateOutlet="tempOutlet" ></ng-container>
 </div>
 <ng-template #tempOutlet>
     <ng-content select="[card-body]"></ng-content>
 </ng-template>

说明：这样做是因为如果您有多个相同类型的ng-content(例如card-body,card-icon或blank),那么模板中的最后一个ng-content将被添加到HTML中.因此,只需一个ng-content,并使用ng-template和template outlet将其投影到多个位置.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!