각도 4/5의 조건부 ng- 콘텐츠

Question

안녕하세요. ng- 콘텐츠 의 일부 조건부 구현을 원합니다.

<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-내용이 있다면 이것은 (때문에 예를 들어 카드를 완료 -body, card-icon 또는 blank)를 입력하면 템플릿의 마지막 ng-content가 HTML에 추가됩니다. 그래서 단일 ng 콘텐츠를 가지고 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>