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

Question

我正在使用 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] 属性，选项卡功能正常。

Bootstrap 版本 "@ng-bootstrap/ng-bootstrap": "^2.2.1" Angular 版本 "@angular/common": "^6.1.0",

Answer 1

这可能对以后的人有所帮助。我没有意识到 [destroyOnHide]=false 属性实际上在加载时实例化选项卡集中的所有组件，这与默认模式的功能不同，默认模式通常只按需呈现选项卡条目组件。我们的网络 css 样式器覆盖了默认的 bootstrap 选项卡样式，不会将 'active' class 与 display:none 样式相关联，因此即使只有一个选项卡是主动，他们都出现了。

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

Angular 6 with Ng-Bootstrap setting [destroyOnHide]="false" causes all tabs to render simultaneously under each other

ng-bootstrap

angular