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：手風琴重新初始化組件

回答

相關問題