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

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>