Javascript 如何在引导ngb选项卡集的angular 6中以编程方式加载选项卡
我想使用angular 6 typescript以编程方式加载选项卡。当前,当我单击选项卡时,它会加载。一、 要通过代码加载。这是我尝试过的示例代码,但仍然在单击选项卡时加载Javascript 如何在引导ngb选项卡集的angular 6中以编程方式加载选项卡,javascript,angular,twitter-bootstrap,typescript,angular-bootstrap,Javascript,Angular,Twitter Bootstrap,Typescript,Angular Bootstrap,我想使用angular 6 typescript以编程方式加载选项卡。当前,当我单击选项卡时,它会加载。一、 要通过代码加载。这是我尝试过的示例代码,但仍然在单击选项卡时加载 <ngb-tabset #t="ngbTabset" [activeId]="activeIdString" (tabChange)="tabChangeEvent($event)"> <ngb-tab title="Workforce Plan-Headcount" id="wf1">
<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>
我尝试了这段代码,它在第一次加载时加载第三个选项卡。然后它不会加载第三个选项卡。是否有最好的方式以编程方式加载选项卡
这是我的有效解决方案,可能对其他人有用
<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>
<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>
public beforeChange($event: NgbTabChangeEvent) {
if (condition) {
// prevent from loading
$event.preventDefault();
}
else{
this.t.select($event.nextId);
}
}