Dois ngcontent em um componente Angular

Question

Dois ngcontent em um componente Angular

votos

1

Criei um componente Tabs ( https://stackblitz.com/edit/angulartabs ) utilizados como se segue:

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

O Tabs componente HTML é a seguinte:

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

Isso está funcionando mas eu também preciso a marcação barra de ferramentas para mudar quando selecionado separador muda.

Assim, para cada guia eu preciso definir o seu conteúdo e sua barra de ferramentas.

Como fazer isso?

Atualizar

Talvez a marcação HTML quando usando as guias devem ser:

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

Na guia 2 não há nenhuma barra de ferramentas, que também é uma opção ...

Será que o conteúdo também precisa ser envolto em uma tag?

  <tab title=tab 1>
    <toolbar>Tab 1 toolbar</toolbar>
    <content>Content 1</content>
  </tab>

angular angular6 angular2-template angular7

Publicado 18/12/2018 em 11:11
fonte usuário Miguel Moura

Em outras línguas...

1 respostas

zmag · Accepted Answer · 2018-12-18 11:22

Atualizar

Acho que tenho uma idéia correta graças ao seu código stackblitz.

Ele pode ser resolvido por um estilo CSS com translusion-content ng. Aqui estão os códigos HTML com atributo 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>

Esta abordagem não é ruim eu acho.