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

Question

我在单个 div 部分下的组件中使用 ngb-tabset。此 div 标记根据条件为真显示。当条件为假时，显示不同的部分。

<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”，当 division 标签隐藏并再次显示时，活动选项卡设置为第一个选项卡（标题-1) 自动。如何不允许这个？

Answer 1

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