时间戳

首页 > 解决方案 > Angular 6 与 Ng-Bootstrap 设置 [destroyOnHide]="false" 导致所有选项卡在彼此下同时呈现

angular - Angular 6 与 Ng-Bootstrap 设置 [destroyOnHide]="false" 导致所有选项卡在彼此下同时呈现

问题描述

我正在使用 Angular 6 和 ng-bootstrap，如果我在 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”，

标签： angularng-bootstrap

解决方案

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

推荐阅读