在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‘：

名字，那么你可以在任何标签中使用‘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>

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