Deux ngcontent sur un composant angulaire

voix
1

Je créé un composant Tabs ( https://stackblitz.com/edit/angulartabs ) utilisé comme suit:

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

Les onglets des composants HTML est la suivante:

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

Cela fonctionne, mais je dois aussi le balisage de barre d'outils pour changer lors de la sélection des modifications de l'onglet.

Donc, pour chaque onglet, je dois définir son contenu et sa barre d'outils.

Comment faire?

Mettre à jour

Peut-être que le balisage HTML lorsque vous utilisez les onglets doit être:

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

Dans l'onglet 2 il n'y a aucune barre d'outils qui est également une option ...

Est-ce que le contenu doit également être enveloppé dans une balise?

  <tab title=tab 1>
    <toolbar>Tab 1 toolbar</toolbar>
    <content>Content 1</content>
  </tab>
Créé 18/12/2018 à 11:11
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
1

Mettre à jour

Je pense que je suis un grand merci à votre code stackblitz idée correcte.

Il peut être résolu par un style CSS avec translusion ng contenu. Voici les codes HTML avec attribut de style.

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>

Cette approche est pas mal je pense.

Créé 18/12/2018 à 11:22
source utilisateur

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