Можно ли установить содержимое в компоненте динамических вкладок ng2-bootstrap в шаблон?

Я использую динамические вкладки ng2-bootstrap, и мне интересно, можно ли настроить содержимое на вкладке как шаблон или отдельный компонент.

Итак, в примере в документации вы устанавливаете такой массив вкладок.

public tabs: any[] = [
{title: 'Dynamic Title 1', content: 'Dynamic content 1'},
{title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true},
{title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true}

];

Я хотел бы установить содержимое в шаблон или отдельный компонент. Это возможно? Приведите пример. Спасибо!


angular ng2-bootstrap
person Derrick Hammond    schedule 06.02.2017    source источник
comment
stackoverflow.com/questions/36325212/, вы также можете использовать createEmbeddedView() вместо createElement и использовать TemplateRef (из <template>...</template>) и создать по одному для каждого элемента в массиве, подобно связанному ответу.   -  person Günter Zöchbauer    schedule 06.02.2017
comment
Спасибо за комментарий. Я видел связанную ветку и не был уверен, что это то решение, которое я искал. Я рассматриваю это как возможное решение. Я опубликую комментарий, когда найду решение.   -  person Derrick Hammond    schedule 06.02.2017

Ответы (3)


arrow_upward
0
arrow_downward

Из примера в ng2-bootstrap

<tabset>
<tab heading="component tab title">
     Your component goes here:
     <your-component></your-component>
</tab>
</tabset>

Вы можете написать любой компонент и поместить его селектор в тег вкладки.

person Omri Luzon    schedule 06.02.2017
comment
Я понимаю, как можно построить вкладку таким образом, но как это динамично? Мне нужно передать вкладку, ее компонент в массиве вкладок, а не статически объявлять ее в разметке. - person Derrick Hammond; 06.02.2017

arrow_upward
0
arrow_downward

Спасибо Гюнтеру Цохбауэру за ссылку на сообщение Angular 2 динамические вкладки с выбранными пользователем компонентами. Это дало мне достаточно указаний для выполнения задачи. Я использую Angular2 v2.4.1, поэтому мое решение немного отличалось от того, что было представлено в другом посте. Я опубликую больше о своем решении, когда соберу его более полно.

person Derrick Hammond    schedule 06.02.2017

arrow_upward
0
arrow_downward

Я понял, что единственный способ решить вашу проблему — оставить содержимое в виде пустой строки, т. е. {title: 'someTab', content: ''}, а затем в вашем шаблоне использовать оператор switch, используя заголовок вкладки для выберите, какой компонент вы хотите отобразить для конкретной вкладки.

Например: в вашем файле app.component.ts:

  public tabs: any[] = [
{title: 'TabA', content:  ''},
{title: 'TabB', content: '', },
{title: 'TabC', content: '', },

];

В вашем шаблоне:

<tabset>
    <tab heading="Static title">Static content</tab>
    <tab *ngFor="let tabz of tabs"
         [heading]="tabz.title"
         [active]="tabz.active"
         (select)="tabz.active = true"
         (deselect)="tabz.active = false"
         [disabled]="tabz.disabled"
         [removable]="tabz.removable"
         (removed)="removeTabHandler(tabz)"
         [ngSwitch]="tabz.title">

  <tab-a-component *ngSwitchCase="'TabA'" ></tab-a-component>
  <tab-b-component *ngSwitchCase="'TabB'" ></tab-b-component>
  <tab-c-component *ngSwitchCase="'TabC'" ></tab-c-component>

    </tab>
  </tabset>
person Johanna    schedule 07.03.2017