Zwei ngcontent auf einem Winkelkomponente

stimmen
1

Ich habe eine Tabs Komponente ( https://stackblitz.com/edit/angulartabs ) wie folgt verwendet:

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

Die Tabs Component HTML ist wie folgt:

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

Dies funktioniert, aber ich brauche auch die Symbolleiste Markup wenn Registerkarte Änderungen ausgewählt zu ändern.

Also für jeden Reiter muss ich seinen Inhalt und seine Symbolleiste definieren.

Wie macht man das?

Aktualisieren

Vielleicht sollte der HTML-Markup, wenn die Tabs verwendet sein:

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

In Tab 2 gibt es keine Symbolleiste, die auch eine Option ist ...

Hat Inhalt muss auch in einem Tag gewickelt werden?

  <tab title=tab 1>
    <toolbar>Tab 1 toolbar</toolbar>
    <content>Content 1</content>
  </tab>
Veröffentlicht am 18/12/2018 um 11:11
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
1

Aktualisieren

Ich glaube, ich habe eine richtige Vorstellung dank Ihrer stackblitz Code.

Es kann durch CSS-Styling mit ng-Inhalt translusion gelöst werden. Hier ist HTML-Codes mit Stil-Attribute.

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>

Dieser Ansatz ist nicht schlecht, denke ich.

Beantwortet am 18/12/2018 um 11:22
quelle vom benutzer

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