angular 4/5 中的条件 ng 内容

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

最好利用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>

Answer 2

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

 <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 使其投影到多个位置。

angular 4/5 中的条件 ng 内容

conditional ng-content in angular 4/5

angular2-ngcontent

angular