Включать компонент в Angular несколько раз?

Question

Я хотел бы добиться следующего:

<s-panel-edicion>
  <s-barra-lateral posicion="right" icono="fa fa-cog" [animar]="true">cualquier contenido</s-barra-lateral>
  <s-barra-lateral posicion="left" icono="fa fa-cog" [animar]="true">cualquier contenido </s-barra-lateral>
 </s-panel-edicion>

Справа и слева - положение боковой панели, и это мой компонент редактирования:

<div class="container-plantilla">
  <div class="plantilla-template" [ngStyle]="moverBarraLeft">
    <ng-content select="s-barra-lateral"></ng-content>
  </div>
  <div class="plantilla-contenido" [ngClass]="{'plantilla-contenido-oculto':!displayLeft,'plantilla-contenido-no-oculto':displayLeft,'plantilla-contenido-full':displayLeft}">
    <ng-content select="s-contenido"></ng-content>
  </div>
  <div class="plantilla-template" [ngStyle]="moverBarraRight">
    <ng-content select="s-barra-lateral"></ng-content>
  </div>
</div>

Показана только одна сторона. Кто-нибудь может подсказать мне, как я могу этого достичь? Я буду признателен за вашу помощь.

(Мой английский не очень хороший, спасибо)

Answer 1

Если я правильно понимаю, что вы спрашиваете, вам нужно использовать "выбрать" следующим образом:
select="[name]"тогда вы можете использовать "имя" в любом теге.

Ваш HTML будет выглядеть так:

<s-panel-edicion>
  <s-barra-lateral content1 posicion="right" icono="fa fa-cog" [animar]="true"> cualquier contenido</s-barra-lateral>
  <s-barra-lateral content3 posicion="left" icono="fa fa-cog" [animar]="true">cualquier contenido </s-barra-lateral>
</s-panel-edicion>

с панелью-Edicion:

<div class="container-plantilla">
  <div class="plantilla-template" [ngStyle]="moverBarraLeft">
    <ng-content select="[content1]"></ng-content>
  </div>
  <div class="plantilla-contenido" [ngClass]="{'plantilla-contenido-oculto':!displayLeft,'plantilla-contenido-no-oculto':displayLeft,'plantilla-contenido-full':displayLeft}">
    <ng-content select="[content2]"></ng-content>
  </div>
  <div class="plantilla-template" [ngStyle]="moverBarraRight">
     <ng-content select="[content3]"></ng-content>
  </div>
</div>

Пример цикла

<s-panel-edicion>
  <div *ngFor="let item of items">
    <s-barra-lateral *ngIf="item.posicion == 'right'" content1 posicion="right" icono="fa fa-cog" [animar]="true"> cualquier contenido</s-barra-lateral>
    <s-barra-lateral *ngIf="item.posicion == 'left'" content3 posicion="left" icono="fa fa-cog" [animar]="true"> cualquier contenido</s-barra-lateral>
  </div>   
</s-panel-edicion>