如何在ngbNav选项卡中具有不同的组件

Question

我正在使用Angular和ngbNav创建选项卡。问题是我有API中的选项卡名称，为了显示它们，我需要ngFor，但对于选项卡的内容，我应该显示不同的组件。为了实现这一点，我使用了ngSwitch。

<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem *ngFor="let element of elements" [ngSwitch]="element.name">
<a ngbNavLink>{{element.name}}</a>
<ng-template ngbNavContent *ngSwitchCase="'Super Item'">
<app-super-item
></app-super-item>
</ng-template>
<ng-template ngbNavContent *ngSwitchCase="'Another Item'">
<app-another-item
></app-another-item>
</ng-template>
<ng-template ngbNavContent *ngSwitchDefault><div>Default</div></ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>

在这种情况下，我不知道如何激活第一个选项卡。一切都可以，但只有在点击选项卡后。我希望默认情况下第一个选项卡处于活动状态。

Answer 1

我会将组件添加为元素对象中的键/值对。然后你可以用｛｛element.component｝｝在for循环中获取它。