Question

我正在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();
    ...
  }

Answer 1

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

Answer 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();
    ...
}

我敢肯定，这是一种更加优雅的方式，希望有人能向我们双方展示这一点，但是对于我来说，这种方式一直很好，因为我几乎总是向几乎每个组件注入某种服务。

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

2 个答案: