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]"，然后您可以在任何标签中使用'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>

在Angular中多次转换一个组件？

1 个答案: