嗨我想要一些有条件的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将其投影到多个位置.
