Dos ngcontent en un componente angular

votos
1

Creé un componente Tabs ( https://stackblitz.com/edit/angulartabs ) utilizado como sigue:

<tabs>
  <tab title=tab 1>Content 1</tab>
  <tab title=tab 2 active=true>Content 2</tab>
</tabs>

El componente HTML aquí es la siguiente:

<div class=head>
  <ul class=tabs>
    <li *ngFor=let tab of tabs (click)=select(tab) class=tab [class.active]=tab.active>
      <a>{{ tab.title }}</a>
    </li>
  </ul>
  <div class=toolbar>Toolbar</div>
</div>
<ng-content></ng-content>

Esto está funcionando pero también necesito el marcado barra de herramientas para cambiar cuando se selecciona la pestaña cambios.

Así, por cada ficha que necesito para definir su contenido y su barra de herramientas.

¿Como hacer esto?

Actualizar

Tal vez el código HTML cuando se utilizan las más aquí debe ser:

<tabs>
  <tab title=tab 1>
    <toolbar>Tab 1 toolbar</toolbar>
    Content 1
  </tab>
  <tab title=tab 2 active=true>
    Content 2
  </tab>
</tabs>

En la ficha 2 no hay una barra de herramientas, que es también una opción ...

contenido hace también necesita ser envuelto en una etiqueta?

  <tab title=tab 1>
    <toolbar>Tab 1 toolbar</toolbar>
    <content>Content 1</content>
  </tab>
Publicado el 18/12/2018 a las 11:11
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
1

Actualizar

Creo que tengo una idea correcta gracias a su código stackblitz.

Puede ser resuelto por el estilo CSS con translusion ng-contenido. Éstos son los códigos HTML con atributos de estilo.

app.component.html:

<tabs>
  <tab title="tab 1">
    Content 1
    <div class="toolbar">Toolbar 1</div>
  </tab>
  <tab title="tab 2" active="true">
    Content 2
    <div class="toolbar">Toolbar 2</div>
  </tab>
</tabs>

tabs.component.html:

<div style="position: relative">
  <div class="head">
    <ul class="tabs">
      <li *ngFor="let tab of tabs" (click)="select(tab)" class="tab" [class.active]="tab.active">
        <a>{{ tab.title }}</a>
      </li>
    </ul>
  </div>
  <ng-content></ng-content>
</div>

tab.component.html:

<div *ngIf="active" style="position: absolute; right: 0; top: 0">
  <ng-content select=".toolbar"></ng-content>
</div>
<div [hidden]="!active" class="pane">
  <ng-content></ng-content>
</div>

Este enfoque no es malo, creo.

Respondida el 18/12/2018 a las 11:22
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more