Содержание ng-tab в модуле - PullRequest
Новая
       12

Содержание ng-tab в модуле

0 голосов
/ 28 сентября 2018

У меня следующая ситуация, у меня есть UserProfileComponent со структурой вкладок, и я хочу добавить вкладки из разных модулей.

UserProfileComponent.html 

<ngb-tabset>
   <ngb-tab>
      <app-user-profile-history></app-user-profile-history>
      <another-tab></another-tab>
   </ngb-tab>
 </ngb-tabset>

app-user-profile-history.html 

<ng-template ngbTabTitle>History</ng-template>
    <ng-template ngbTabContent>
       <p>text</p>
</ng-template>

компоненты объявлены в главном модуле.Основной модуль 

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { HistoryComponent } from './user-profile/history/history.component';
import { AnotherTabComponent } from './user-profile/another-tab/another-tab.component';

@NgModule({
   imports: [
     CommonModule,
     NgbModule.forRoot()
   ],
   declarations: [
      UserProfileComponent,
      HistoryComponent,
      AnotherTabComponent]
   })

Но содержимое не отображается

1 Ответ

0 голосов
/ 29 сентября 2018

app-user-profile-history должен быть объявлен как любой другой компонент (вам не нужно ngTabTitle ngTabContent)

, тогда в вашей вкладке: 

<ngb-tabset>
  <ngb-tab title="User profile history">
    <ng-template ngbTabContent>
      <app-user-profile-history></app-user-profile-history>
    </ng-template>
  </ngb-tab> 
  <ngb-tab title="Another tab">
    <ng-template ngbTabContent>
      <another-tab></another-tab>
    </ng-template>
  </ngb-tab>
</ngb-tabset>
...