如何在加载时选择NgbTabset选项卡为活动？

Question

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

该页面上的activeId文档说明了如何将选项卡硬编码为活动,但我需要以编程方式设置选项卡选项.我可以使用[activeId] = getActiveId()设置选项卡(其中getActiveId()访问我可以存储选项卡值的服务),但是当设置activeId时会出现各种问题,这可能是为什么文档说"使用"select"方法以编程方式切换选项卡".

按照这个方向我尝试在ngb-tabset上使用select并使用html onload事件在DOM中解决这个问题,但不清楚在哪里放置onload并且我无法使其工作.

我尝试在TypeScript中使用ngOnInit来设置DOM状态,但无法弄清楚如何引用ngb-tabset.

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

Answer 1

我想出了如何使这个工作,但我尚未决定它是一个kludgy解决方案或优雅的解决方案.

我最后反对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何时执行相关的时间我记录了最多的腾讯.

在https://github.com/ng-bootstrap/ng-bootstrap/issues/1016上讨论"无法以编程方式选择选项卡" 也建议使用activeId,所以我对无视https:// ng-bootstrap上的建议感到有信心.github.io /#/ components/tabs/api to"使用"select"方法以编程方式切换选项卡".