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

Question

我有一个 UI，我在其中使用 ngb-tabset 和 ngb-tab 来呈现以下内容：

用户在表单中输入上面的内容，并在Graph Navigation选项卡下获得图形可视化如下：

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

但是，当用户在 Graph Navigation 选项卡上单击返回时，出现以下错误：

 myDiagram is undefined

其中 myDiagram 是一个 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

第一期，尝试使用LocalStorage来保存标签状态。

there was a mistake in my addressing myDiagram is a go.Diagram type variable which is used within ngOnChanges() and ngAfterViewInit() lifecycle hook which goes undefined after the tab is switched back.

尝试将您的 reInit 代码放在 setTimeout 中，这样您就可以在下一个周期而不是当前周期设置 dom 元素。

Answer 2

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

默认值为 true，每次切换标签时都会呈现内容。参考：https://ng-bootstrap.github.io/#/components/tabs/api

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

How to preserve previous ngbTab content when switching between tabs in ng-bootstrap Angular 2 typescript

angular

typescript

ng-bootstrap

gojs

代码

版本

编辑