在 ng-bootstrap Angular 2 打字稿中的选项卡之间切换时如何保留以前的 ngbTab 内容

Question

我有一个用户界面，我正在使用它ngb-tabset并ngb-tab呈现以下内容：

用户在表单上方输入一些内容，并在Graph NavigationTab下获得图形可视化，如下所示：

用户现在可以单击Semantic Query选项卡并从子组件获取信息。

但是，当用户重新单击Graph Navigation选项卡时，我收到以下错误：

 myDiagram is undefined

wheremyDiagram是go.Diagram从父组件获取信息并呈现图表的实例。（GoJS）

代码

parent.component.html

<ngb-tabset>
    <ngb-tab title="Graph Navigation">
        <template ngbTabContent>
        <explore-search-details [config]="visData" [lang]="language"></explore-search-details>
        </template>
    </ngb-tab>
    <ngb-tab title="Semantic Query">
        <template ngbTabContent>
            <explore-search-semantic></explore-search-semantic>
        </template>
    </ngb-tab>

</ngb-tabset>

• explore-search-details是一个子组件，它采用visData和language作为来自父组件的输入变量。

• 在explore-search-details.component.html里面有一个div如下负责渲染

    <div #myDiagramDiv></div>
  

版本

angular 2.4.0, ng-bootstrap 1.0.0-alpha.21

编辑

我的地址中有一个错误myDiagram是一个go.Diagram类型变量，它在ngOnChanges()和ngAfterViewInit()生命周期钩子中使用，在选项卡切换回后未定义。

Answer 1

<ngb-tabset [destroyOnHide]="false">

默认值是true每次切换选项卡时呈现内容。参考：https : //ng-bootstrap.github.io/#/components/tabs/api