Ng-Bootstrap设置为[destroyOnHide] =“ false”的Angular 6使所有选项卡在彼此下同时渲染

Question

如果使用ngb-tabset组件设置[destroyOnHide] = false属性，则每个选项卡条目都会同时显示：

<ngb-tabset #tabs="ngbTabset" [activeId]="activeIdString" [destroyOnHide]="false">  
  <ngb-tab id="vesssel" title="Vessel Details">
    <ng-template ngbTabContent >
      Test one
    </ng-template>    
  </ngb-tab>
  <ngb-tab id="installation" title="Installation"  >
    <ng-template ngbTabContent>
    Test Two
    </ng-template>
  </ngb-tab>


</ngb-tabset>

使两个内容都呈现。选项卡仍然显示和切换，但内容不变。

Test one
Test Two

如果删除[destroyOnHide]属性，则选项卡将正常运行。

引导程序版本“ @ ng-bootstrap / ng-bootstrap”：“ ^ 2.2.1” 角版本“ @ angular / common”：“ ^ 6.1.0”，

Answer 1

这可能会在将来对某人有所帮助。我没有意识到的是，[destroyOnHide] = false属性实际上在加载选项卡集时实例化了选项卡集中的所有组件，这与默认模式下的功能不同，默认模式通常仅按需呈现选项卡条目组件。我们的Web CSS样式器已覆盖默认的引导程序选项卡样式，以不将'active'类与display：none样式相关联，因此即使只有一个选项卡处于活动状态，它们也都出现了。