Question

The "Select an active tab by id" example at https://ng-bootstrap.github.io/#/components/tabs shows how to use a DOM button to programmatically select an Angular Bootstrap tab to be active. But how do you set a tab to be active from within the TypeScript code - for example by referencing some persistent state of what tab was most recently open on this view using a service that stored the state?

The activeId documentation on that page explains how to hard-code a tab to be active, but I need to set the tab choice programmatically. I can set the tab using [activeId] = getActiveId() (where getActiveId() accesses a service in which I can store the tab value), but that gets into all sorts of issues with when the activeId is set, which is presumably why the documentation says "Use the "select" method to switch a tab programmatically".

Following this direction I tried using select on the ngb-tabset and using the html onload event to solve this in the DOM, but was unclear where to place onload and I couldn't get this to work.

I tried using ngOnInit in the TypeScript to set the DOM state but couldn't figure out how to refer to the ngb-tabset.

What is a good way to coordinate between the TypeScript and the DOM to select NgbTabset tab as active on load?

Answer 1

我想出了如何让它发挥作用，但我尚未决定它是一种愚蠢的解决方案还是一种优雅的解决方案。

我最后反对https://ng-bootstrap.github.io/#/components/tabs/api的建议，其中说“使用”select“方法以编程方式切换标签”。我确实使用了activeId，核心代码为：

<ngb-tabset [activeId]="activeIdString">

[activeId]绑定到变量activeIdString，而不是我在原始帖子中描述的方法（使用getActiveId（）方法而不是变量导致“表达式在检查后已更改”错误消息，这虽然如https://github.com/angular/angular/issues/6005所述，它只是一种开发模式错误，仍然是一个问题。）

组件初始化时设置变量activeIdString：

  ngOnInit(): void {
    this.activeIdString = this.tabNameString[this.personService.getNextTab()];
  }

由于此代码位于带有选项卡的组件上，因此我在此组件上记录了mostRecentTab，并在使用选项卡到达组件之前将其转换为导航组件上的nextTab，从而无需关注ngOnInit执行时的确切需要与我记录mostRecentTab时的关系。

https://github.com/ng-bootstrap/ng-bootstrap/issues/1016上的“无法以编程方式选择标签”的讨论也建议使用activeId，因此我感到有信心无视https://ng-bootstrap.github.io/#/components/tabs/api上的建议“使用”select“方法以编程方式切换标签”

Answer 2

我刚用ngb-accordian完成了这件事。

手风琴看起来像这样：

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" [closeOthers]="true">

  <ngb-panel id="static-1" title="First panel">
    <ng-template ngbPanelTitle>
        <button type="button" class="btn" data-toggle="button">
               Tab One
         </button>
    </ng-template>
    <ng-template ngbPanelContent>
         Tab One Content
    </ng-template>
  </ngb-panel>

  <ngb-panel id="static-2" title="Second">
    <ng-template ngbPanelTitle>
        <button type="button" class="btn" data-toggle="button">
              Tab Two
         </button>
    </ng-template>
    <ng-template ngbPanelContent>
         Tab Two Content
    </ng-template>
  </ngb-panel>

</ngb-accordion>

我将我希望在State Service（stateSvc）中显示的选项卡设置为Observable，然后在我的组件中订阅它，所以当我从表单导航并希望返回给用户时 - 例如，管理标签，我设置stateSrv.this.currentAccordianTab =＆＃39; users-manage＆＃39;然后使用手风琴导航到组件。

@ViewChild通过模板引用（#acc）给我一个模板中ngb-accordian的引用

在我的班上，我有这个：

@ViewChild('acc') acc;

currentAccordianTab: string;

ngAfterContentInit() {
    this.stateSvc.currentTab$
        .subscribe(response => {
            this.currentAccordianTab = response;
            if (this.currentAccordianTab = 'users-manage') {
                this.acc.toggle('static-2');
            } else {
                this.acc.toggle('static-1');
            }
        });
}

在ngb-accordian上，有一个toggle方法，它使用tab-id参数来设置当前选项卡。我猜测select方法在ngb-tabset上是等价的，但你可以查看API文档。

基本上我们通过@ViewChild获取对ngb-accordian的引用，然后调用其切换函数this.acc.toggle('static-2');将状态设置为正确可见的选项卡。

Answer 3

不知何故，这些答案不起作用，所以我找到了另一个解决方案。一个更容易的。我希望它可以帮助某人。只需按照以下步骤操作：

1. Give your tabset a 'tabset' identifier:

<ngb-tabset #tabset="ngbTabset"> many tabs... </ngb-tabset>

2. Give every <tab> in your <tabset> an unique id

<ngb-tab id="tab1"> Tab 1 </ngb-tab>
<ngb-tab id="tab2"> Tab 2 </ngb-tab>
<ngb-tab id="tab3"> Tab 3 </ngb-tab>

3. Declare a @ViewChild for your tabset

@ViewChild('tabset')
tabset: any;

4. Set active tab inside ngAfterViewInit (not ngOnInit, that's too early!)

this.tabset.select('tab3');

非常适合我。抱歉，格式奇怪，Stack Overflow 有时无法正常工作。

Answer 4

根据docs，您需要使用 select 方法。为此，首先在视图html文件中为Tabset添加标识符：

<ngb-tabset #tabset="ngbTabset">

在您的.ts文件中声明您的ViewChild：

@ViewChild('tabset') tabset;

然后以这种方式使用方法：

this.tabset.select(YOUR_TAB_ID_HERE);

PS：尽管@Mickey Segal解决方案在大多数情况下都可以使用，但是在我的项目中，我有时发现它不起作用，因此我建议使用文档化的方式来更改活动标签。

Answer 5

<tabset class="tabset" #tabset id="tabset">
<tab></tab>
<tab></tab>
</tabset>

声明选项卡的viewchild

@ViewChild（'tabset'，{static：true}）tabset：任何；

然后在changeEvent或ngOnInit方法上，可以通过其索引将任何选项卡设置为活动状态像

this.tabset.tabs [indexNo] .active = true

How to select NgbTabset tab as active on load?

5 个答案: