如何选择 NgbTabset 选项卡在加载时处于活动状态？

Question

https://ng-bootstrap.github.io/#/components/tabs 处的“按 id 选择活动选项卡”示例展示了如何使用 DOM 按钮以编程方式选择要激活的 Angular Bootstrap 选项卡。但是如何在 TypeScript 代码中将选项卡设置为处于活动状态 - 例如，通过使用存储状态的服务引用此视图上最近打开的选项卡的一些持久状态？

该页面上的 activeId 文档说明了如何将选项卡硬编码为活动状态，但我需要以编程方式设置选项卡选项。我可以使用 [activeId] = getActiveId() 设置选项卡（其中 getActiveId() 访问我可以存储选项卡值的服务），但这会在设置 activeId 时遇到各种问题，这大概就是为什么文档说“使用“选择”方法以编程方式切换选项卡”。

按照这个方向，我尝试在 ngb-tabset 上使用 select 并使用 html onload 事件在 DOM 中解决这个问题，但不清楚将 onload 放在哪里，我无法让它工作。

我尝试在 TypeScript 中使用 ngOnInit 来设置 DOM 状态，但不知道如何引用 ngb-tabset。

在 TypeScript 和 DOM 之间进行协调以选择 NgbTabset 选项卡在加载时处于活动状态的好方法是什么？

Answer 1

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

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');

非常适合我。抱歉，奇怪的格式，堆栈溢出有时不能正常工作。

Answer 2

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

声明标签视图子

@ViewChild('tabset', { static: true }) tabset: any;

然后在 changeEvent 或 ngOnInit 方法上，您可以通过其索引 no 使任何选项卡处于活动状态 喜欢

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

Answer 3

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

<ngb-tabset #tabset="ngbTabset">

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

@ViewChild('tabset') tabset;

然后就这样使用方法：

this.tabset.select(YOUR_TAB_ID_HERE);

PS：虽然@Mickey Segal 解决方案在大多数情况下可能有效，但在我看到的项目中，有时它不起作用，所以我建议使用记录在案的方式来更改活动选项卡。

Answer 4

我想出了如何让它工作，但我不确定它是一个笨拙的解决方法还是一个优雅的解决方案。

我最终违背了https://ng-bootstrap.github.io/#/components/tabs/api 的建议，其中说“使用“选择”方法以编程方式切换选项卡”。我确实使用了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 上关于“使用“选择”方法以编程方式切换选项卡”的建议。

Answer 5

我刚刚用 ngb 手风琴完成了这件事。

手风琴看起来像这样：

<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>

我将希望在状态服务 (stateSvc) 中显示的选项卡设置为 Observable，然后在我的组件中订阅它，因此当我离开表单并想要返回到用户管理选项卡时例如，我设置 stateSrv.this.currentAccordianTab = 'users-manage' 然后使用手风琴导航到组件。

@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 上，有一个切换方法，它采用 tab-id 参数来设置当前选项卡。我猜 select 方法在 ngb-tabset 上是等效的，但你可以查看 API 文档。

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