模块中的 ng-tab 内容

Question

我有下一种情况，我有一个带有选项卡结构的 UserProfileComponent，我想添加来自不同模块的选项卡。

UserProfileComponent.html

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

app-用户配置文件-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]
   })

但是没有显示内容

Answer 1

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>

模块中的 ng-tab 内容

ng-tab content in module

tabs

components

ng-bootstrap

angular