Két ngcontent egy szögletes alkatrész

szavazat
1

Hoztam létre Lapok komponens ( https://stackblitz.com/edit/angulartabs ) használjuk az alábbiak szerint:

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

A lapok Component HTML a következő:

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

Ez működik, de azt is meg kell eszköztár jelölő változni, amikor a kiválasztott lap változásokat.

Tehát minden lapon azt kell határozni annak tartalmát és annak eszköztára.

Hogy kell ezt csinálni?

frissítés

Lehet, hogy a HTML-jelölést, ha a lapok kell:

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

A lap 2 nincs eszköztár, amely szintén egy lehetőség ...

Vajon tartalom is kell csomagolni egy tag?

  <tab title=tab 1>
    <toolbar>Tab 1 toolbar</toolbar>
    <content>Content 1</content>
  </tab>
A kérdést 18/12/2018 11:11
a forrás felhasználó
Más nyelveken...                            


1 válasz

szavazat
1

frissítés

Azt hiszem, van egy helyes elképzelés hála a stackblitz kódot.

Meg lehet megoldani CSS stílust ng-tartalom translusion. Íme HTML kódok style attribútum.

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>

Ez a megközelítés nem rossz, azt hiszem.

Válaszolt 18/12/2018 11:22
a forrás felhasználó

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