Два ngcontent на угловой компонент - PullRequest
Новая
       22

Два ngcontent на угловой компонент

0 голосов
/ 18 декабря 2018

Я создал компонент Tabs (https://stackblitz.com/edit/angulartabs), используемый следующим образом: 

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

HTML компонента Tabs выглядит следующим образом: 

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

Это работает, но яТакже необходимо изменить разметку панели инструментов при изменении выбранной вкладки.

Поэтому для каждой вкладки необходимо определить ее содержимое и панель инструментов.

Как это сделать?

Обновление

Возможно, HTML-разметка при использовании вкладок должна быть: 

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

На вкладке 2 нет панели инструментов, которая также является опцией ...

Содержимое также должно быть заключено в тег? 

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

1 Ответ

0 голосов
/ 18 декабря 2018

Обновление

Мне кажется, я получил правильную идею благодаря вашему стековому коду.

Это можно решить с помощью стилей CSS с преобразованием ng-контента.Вот HTML-коды с атрибутом стиля.

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>

Этот подход, я думаю, неплох.

...