如何使用 ng-bootstrap 在 Angular 中显示动态选项卡内容

Question

我要做什么？

我向 API 发送 POST 请求，并使用响应动态创建选项卡。这是以下代码：

<div id="wrapper" class="container-fluid">
<ngb-tabset class="nav-fill">
<ngb-tab *ngFor="let category of categories" [title]="category.name" [id]="category.id">
      <ng-template ngbTabContent>
        <!-- Here we will have some content.
    This content comes from the API which takes category.id as a param -->
      </ng-template>
    </ngb-tab>
</ngb-tabset>
</div>

希望代码清晰。

我面临的问题是我不知道如何获取内容。因为我需要 category.id 来获取内容，而且我必须以某种方式附加一个采用 category.id 并执行请求并获取数据的方法。

所以用户点击一个选项卡，显示一些内容，当他点击其他选项卡时显示另一组内容，这些内容都是通过 API.

我找到了一种方法。 OnNgInit() 我可以获得所有需要的数据，然后当 *ngFor 运行时我将使用 id 引用来获取内容。但我一直在寻找一种更强大的方法来做到这一点

Answer 1

您可以将 (ngClick) 事件处理程序附加到您的 ngb 选项卡，而不是在有时从未使用过的 ngOninit() 方法期间调用所有内容数据：

<ngb-tab *ngFor="let category of categories" (ngClick)="selectedTab(category.id)" [title]="category.name" [id]="category.id">
<ng-template ngbTabContent>
    <!-- Here we will have some content.
This content comes from the API which takes category.id as a param -->
  </ng-template>
</ngb-tab>

并且在您的组件中，您可以调用剩余方法来获取选项卡的内容：

@Component({...})
export class someComponent{
/* constructors private members bla bla */

  selectedTab(id:int):any{
//call your service which makes http call to get content for your selected tab
    getContent(id);
   }
}

希望能回答您的问题！

如何使用 ng-bootstrap 在 Angular 中显示动态选项卡内容

How do display dynamic tab content in Angular using ng-bootstrap

ng-bootstrap

angular

angular6