angular - 角度 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（例如 card-body、card-icon 或空白），那么模板中的最后一个 ng-content 将被添加到您的 HTML 中。因此，拥有一个 ng-content 并使用 ng-template 和模板出口使其投影到多个位置。

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>