记住 Angular 5 中的选定选项卡（引导选项卡集）答案

【问题标题】：Remember selected tab (bootstrap tabset) in Angular 5记住 Angular 5 中的选定选项卡（引导选项卡集）
【发布时间】：2019-07-05 08:22:09
【问题描述】：

我在 Angular 5 应用程序中使用来自 Bootstrap (ngx-bootstrap.es2015.js) 的标签集。它在大多数情况下都可以正常工作。但是，当显示另一个组件时（并且显示选项卡集的组件被隐藏），然后您返回显示选项卡集的组件，选项卡集始终显示第一个选项卡为选中状态（即使可能选择了第三个选项卡）。返回“第一个”组件时，有没有办法“记住”哪个选项卡处于活动状态？

一些代码：

<tabset type="pills" [justified]="true" *ngIf="someCondition ">
      <tab *ngFor="let category of categories"
           heading="{{category.categoryNumber}} {{category.categoryName}}"
           (select)=setCategory(category.categoryNumber)>
      </tab>
    </tabset>

setCategory(categoryNumber) {
    this.currentCategory = categoryNumber;
    this._ref.detectChanges();
    ...
  }

【问题讨论】：

我认为tabset 的destroyOnHide 输入可能是您正在寻找的。span>
嗯，我试过 [destroyOnHide]="false"，但我得到：无法绑定到 'destroyOnHide'，因为它不是 'tabset 的已知属性
出于某种原因，我认为您使用的是ng-bootstrap，它为此提供了开箱即用的解决方案。

标签： angular twitter-bootstrap-3 ngx-bootstrap

【解决方案1】：

您必须将某些状态合并到您的应用中，以便它记住某些数据。我过去曾使用this 链接来了解有关在我的 Angular 应用程序中创建此类状态的更多信息。

【讨论】：

【解决方案2】：

在这些情况下，我通常会使用某种标志，通常是在我正在注入的服务上，它使选项保持选中状态。然后我根据服务上的值使用 ngClass 设置“活动”类。所以大致上是这样的：

<tabset type="pills" [justified]="true" *ngIf="someCondition ">
  <tab *ngFor="let category of categories"
       heading="{{category.categoryNumber}} {{category.categoryName}}"
       [ngClass]="{ 'active' : category.categoryNumber === someSvc.selectedCategoryNumber }"
       (select)=setCategory(category.categoryNumber)>
  </tab>
</tabset>

constructor(private someSvc: MySomeService) { }

setCategory(categoryNumber) {
    this.someSvc.selectedCategoryNumber = categoryNumber;
    this.currentCategory = categoryNumber;
    this._ref.detectChanges();
    ...
}

我确信有一种更优雅的方式，希望有人会过来向我们俩展示这一点，但它对我来说总是足够好，因为我几乎总是为几乎每个组件注入某种服务。

【讨论】：