ng-bootstrap：手风琴重新初始化组件

我在ng-bootstrap中使用了ngb-accordion。切换标题会导致子组件重新初始化。例如，切换标题会导致下拉列表重置。看起来这是因为当面板被隐藏时，<div class="card-block"></div>被删除。ng-bootstrap：手风琴重新初始化组件

即使在手风琴中“隐藏”了部件，我该如何维护组件的状态？

模板文件：

<ngb-accordion activeIds="side-bar-accordion-1" (panelChange)="beforeChange($event)"> 

    <div [class.hide-card-block]="status"> 
    <ngb-panel id="side-bar-accordion-1" class="foo"> 
    <template ngbPanelTitle> 
     <div class="title">Axes</div> 
    </template> 
    <template ngbPanelContent> 
     <!--This is the component whose state I want to maintain:--> 
     <side-bar-axes></side-bar-axes> 
    </template> 
    </ngb-panel> 
    </div> 

    <ngb-panel id="side-bar-accordion-2"> 
    <template ngbPanelTitle> 
     <div class="title">Fancy</div> 
    </template> 
    <template ngbPanelContent> 
     blah blah 
    </template> 
    </ngb-panel> 

    <ngb-panel id="side-bar-accordion-3"> 
    <template ngbPanelTitle> 
     <div class="title">Settings</div> 
    </template> 
    <template ngbPanelContent> 
     blah blah 
    </template> 
    </ngb-panel> 

</ngb-accordion>

组件打字稿文件：

import { Component, ViewChildren, ViewEncapsulation } from '@angular/core'; 
import { NgbPanelChangeEvent } from '@ng-bootstrap/ng-bootstrap'; 

import { FieldChooseFiltersComponent } from '../field-choose-filters/field-choose-filters.component'; 

@Component({ 
    moduleId: module.id, 
    selector: 'side-bar', 
    templateUrl: 'side-bar.component.html', 
    styleUrls: ['side-bar.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 

export class SideBarComponent { 
    hideNum: number = 1; 
    status: boolean = false; 

    toggleStatus() { 
    this.status = !this.status; 
    } 
    public beforeChange($event: NgbPanelChangeEvent) { 

    if ($event.panelId === '1' && $event.nextState === false) { 
     $event.preventDefault(); 
    } 

    if ($event.panelId === '2' && $event.nextState === false) { 
     $event.preventDefault(); 
    } 

    if ($event.panelId === '3' && $event.nextState === false) { 
     $event.preventDefault(); 
    } 
    }; 
}

来源

2016-11-06 goodoldneon777

目前执行的https://ng-bootstrap.github.io/#/components/accordion假定只有激活（显示）面板壳保存在DOM。这是一个非常明智的设计决定保持周围不可见的面板将意味着：

即使从来没有表现出
角将不得不对不可见的，不要的部分运行变化检测他们的内容被初始化将经验增加到最终用户。

所以，目前事情按设计工作。如果要在面板打开/关闭时保持状态，则可以选择将相关状态移至父组件之一。

如果社区中有足够的兴趣，我们可能会添加一个选项到而不是销毁面板的内容。

来源

2016-11-06 16:59:52

是的，它的工作方式现在对大多数项目都有意义。但如果有防止破坏面板内容的选项，它会很棒！谢谢 – goodoldneon777

我们需要面板内容不被破坏。请提供一个选项，不要销毁小组的内容 – kotpal

ng-bootstrap：手风琴重新初始化组件

回答

相关问题