激活星云主题选项卡答案

【问题标题】：Activate a Nebular Theme tab激活星云主题选项卡
【发布时间】：2018-10-24 05:06:29
【问题描述】：

我正在使用 Nebular Theme 组件，并希望通过单击按钮手动激活特定选项卡。我在他们的文档中找不到任何信息 https://akveo.github.io/nebular/docs/components/tabs/overview#nbtabsetcomponent

<nb-tabset>
  <nb-tab tabTitle="Search">xxxx</ng-tab>
  <nb-tab tabTitle="Add">yyyyy</ng-tab>
</nb-tabset>

<button (click)="ActivateTabAdd()">Add</button>

任何帮助表示赞赏。谢谢

【问题讨论】：

标签： angular tabs nebular

【解决方案1】：

是的，为什么不

标签nb-tab 有一个active 属性，它指定活动标签

这样你就可以处理这个了

<nb-tabset>
  <nb-tab tabTitle="Search" active="{{setActiveSearch}}">xxxx</ng-tab>
  <nb-tab tabTitle="Add" active="{{setActiveAdd}}" >yyyyy</ng-tab>
</nb-tabset>
<button (click)="ActivateTabAdd()">Add</button>

在 TS 文件中

setActiveSearch : boolean = false;
setActiveAdd: boolean = false;

ActivateTabAdd(){
this.setActiveAdd = true;
}

【讨论】：

谢谢.. 我让它与 xxxx 一起工作
@El7or，请帮助我了解更多细节以推进此案。

【解决方案2】：

<nb-tabset id="tabset" name="tabset" #tabset>
  <nb-tab tabTitle="Search" id="searchTab" name="searchTab" #searchTab >xxxx</ng-tab>
  <nb-tab tabTitle="Add" id="addTab" name="addTab" #addTab >yyyyy</ng-tab>
</nb-tabset>
<button (click)="ActivateTabAdd()">Add</button>

import { NbTabsetComponent, NbTabComponent } from '@nebular/theme/components/tabset/tabset.component';

@ViewChild("tabset") tabsetEl: NbTabsetComponent;
@ViewChild("addTab") addTabEl: NbTabComponent;

ActivateTabAdd(){
  this.tabsetEl.selectTab(this.addTabEl);
}

【讨论】：