web-dev-qa-db-ja.com

angular 4/5の条件付きng-content

こんにちは私は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。

angularangular2-ngcontent
6
Mantu Nigam

指定されたスニペットを使用できます。

 <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>

説明：これは、同じタイプ（card-body、card-icon、blankなど）のng-contentが複数ある場合、テンプレートの最後のng-contentがHTMLに追加されるためです。 。したがって、単一のng-contentを用意し、ng-templateとテンプレートアウトレットを使用して複数の位置に投影します。

19
Ankit Kapoor

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>
2
Rahul Singh