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

Question

嗨,我想要一些有条件的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.

Answer 1

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

 <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(例如卡片主体,卡片图标或空白),则模板中的最后一个ng-content将添加到您的HTML中.因此,只需一个ng-content,并使用ng-template和template outlet将其投影到多个位置.

Answer 2

更好地利用ng-template

   <div *ngIf="description.children.length;else newDiv">
      <ng-content select="[card-body]"></ng-content>
      <ng-container *ngTemplateOutlet="newDiv"></ng-container>
   </div>

   <ng-template #newDiv>
      <ng-content select="[card-body]"></ng-content>
   </ng-template>