为什么显示隐藏和显示时 ngb-tabset 重置为第一个选项卡？

Question

我在单个 div 部分下的组件中使用 ngb-tabset。此 div 标签基于条件为真显示。当条件为 false 时，将显示不同的部分。

<div *ngIf="showAllTabs">
  <ngb-tabset>
    <ngb-tab id="heading-1">
      <ng-template ngbTabTitle>
         <div>HEADING 1</div>
      </ng-template>
   </ngb-tab>
 
   <ngb-tab id="heading-2">
      <ng-template ngbTabTitle>
         <div>HEADING 2</div>
      </ng-template>
   </ngb-tab>
  </ngb-tabset>
</div>

<div *ngIf="!showAllTabs">
  <!-- Some other work -->
</div>

问题是，例如，如果活动选项卡是“heading-2”，当划分标签被隐藏并再次显示时，活动选项卡会自动设置为第一个选项卡（标题-1）。怎么不允许呢？

Answer 1

原因是结构指令“ngIf”。 ngIf 从 DOM 中删除元素，因此，当 ngIf 为真时，元素会重新呈现，这会导致默认选项卡可见。这可以通过编程选项卡选择来解决，方法是将选项卡的 id 存储在一个变量中，并在每次 DOM 元素返回时启用它。