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

时间:2017-11-13 15:28:41

标签: angular typescript ng-bootstrap gojs

我有一个用户界面,我使用options_dict = {'a' : ['aa','bb','cc'], 'b' : ['dd','ee','ff']} dropdown = Select(title="a dropdown menu:", options = ['a', 'b'], value='a') # let all sub-options be the default option checkbox = CheckboxGroup(labels=['aa','bb','cc','dd','ee','ff'], active=['aa','bb','cc','dd','ee','ff']) # assume we have some function that is updating and fetching the value of the 'dropdown' def select_something(): selected_attribute = dropdown.value() return selected_attribute def update(): selected_attribute = select_something() # update the CheckBox contents - obviously Pseudo-code checkbox.labels = options_dict[selected_attribute] # and have all of them "pre-checked" checkbox.active = options_dict[selected_attribute] dropdown.on_change('value', lambda attr, old, new: update()) ngb-tabset来呈现以下内容:

enter image description here

用户在表单中输入上面的内容,并在ngb-tab标签下获取图形可视化,如下所示:

enter image description here

用户现在可以点击Graph Navigation标签并从子组件中获取信息。

然而,当用户点击Semantic Query标签时,我收到以下错误:

Graph Navigation

其中 myDiagram is undefined myDiagram实例,它从父组件获取信息并呈现图表。(GoJS

代码

go.Diagram

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-detailsvisData作为父组件的输入变量。

  • language中有一个explore-search-details.component.html,如下所示,负责渲染

    div

版本

<div #myDiagramDiv></div> angular 2.4.0

修改

我的地址ng-bootstrap 1.0.0-alpha.21中有一个错误myDiagram类型变量在go.DiagramngOnChanges()生命周期挂钩中使用,在切换回标签后未定义

2 个答案:

答案 0 :(得分:2)

对于第一个问题,请尝试使用LocalStorage保留选项卡状态。

  

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

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

答案 1 :(得分:2)

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

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