如何以引导程序 ngb-tabset 的角度 6 以编程方式加载选项卡答案

【问题标题】：How to load the tabs programmatically in angular 6 of bootstrap ngb-tabset如何以引导程序 ngb-tabset 的角度 6 以编程方式加载选项卡
【发布时间】：2019-06-29 09:29:31
【问题描述】：

我想使用 Angular 6 打字稿以编程方式加载选项卡。当前，当我单击选项卡时它会加载。我，想通过代码加载。这是我尝试过的示例代码，但仍然会在单击选项卡时加载。

<ngb-tabset #t="ngbTabset" [activeId]="activeIdString" (tabChange)="tabChangeEvent($event)">
  <ngb-tab title="Workforce Plan-Headcount" id="wf1">
    <ng-template ngbTabContent>
      <app-workforce-plan-headcount></app-workforce-plan-headcount>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Workforce Plan-Cost" id="wf2">
    <ng-template ngbTabContent>
      <app-workforce-plan-cost></app-workforce-plan-cost>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Current Vacancies" id="wf3">
    <ng-template ngbTabContent>
      <app-current-vacancies></app-current-vacancies>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Data Entry" id="wf4">
    <ng-template ngbTabContent>
      <app-data-entry></app-data-entry>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

TS 文件

activeIdString: string;
    tabChangeEvent(evt: any) {
            this.activeIdString = "wf3";
            console.log(this.activeIdString); 
          }

我尝试了这段代码，它在第一次加载时加载了第三个标签。然后它不会加载第三个选项卡。是否有任何以编程方式加载选项卡的最佳方法。

How do you get the selected tab from a bootstrap tabset in Angular4?

https://github.com/ng-bootstrap/ng-bootstrap/issues/1682

http://plnkr.co/edit/IjDOUfoenwYdvW136SPY?p=preview

【问题讨论】：

标签： javascript angular twitter-bootstrap typescript angular-bootstrap

【解决方案1】：

这对我来说是可行的解决方案，可能对其他人有用

<ngb-tabset #t="ngbTabset" (tabChange)="beforeChange($event)">
  <ngb-tab title="Workforce Plan-Headcount" id="wf1">
    <ng-template ngbTabContent>
      <app-workforce-plan-headcount></app-workforce-plan-headcount>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Workforce Plan-Cost" id="wf2">
    <ng-template ngbTabContent>
      <app-workforce-plan-cost></app-workforce-plan-cost>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Current Vacancies" id="wf3">
    <ng-template ngbTabContent>
      <app-current-vacancies></app-current-vacancies>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Data Entry" id="wf4">
    <ng-template ngbTabContent>
      <app-data-entry></app-data-entry>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

component.ts 文件

public beforeChange($event: NgbTabChangeEvent) {
        if (condition) {
        // prevent from loading
            $event.preventDefault();   
        }
    else{
        this.t.select($event.nextId);
    }
    }

【讨论】：