Включать компонент в Angular несколько раз? - PullRequest
Новая
       34

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

0 голосов
/ 19 февраля 2019

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

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

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

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

1 Ответ

0 голосов
/ 19 февраля 2019

Если я правильно понимаю, что вы спрашиваете, вам нужно использовать «выбрать» следующим образом:
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>
...