ng-bootstrap：アコーディオンはコンポーネントを再初期化します

Question

ng-bootstrapにngb-accordionを使用しています。ヘッダーを切り替えると、子コンポーネントが再初期化されます。たとえば、ヘッダーを切り替えると、ドロップダウンがリセットされます。これは、パネルが隠されているときに<div class="card-block"></div>が削除されたためです。

コンポーネントがアコーディオンで「非表示」になっている場合でも、コンポーネントの状態をどのように維持するのですか？

テンプレートファイル：

<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> 

コンポーネントtypescriptファイル：

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(); 
    } 
    }; 
} 

Answer 1

https://ng-bootstrap.github.io/#/components/accordionの現在の実装では、唯一の活性（表示）パネルシェルがDOMに保たれることを前提としています。その内容は、が

角度は可視とドン」ではない部分に変化検出を実行する必要があります示したことがない場合でも、初期化されます

• これは、次のことを意味するであろう周りの非可視パネルを保つように配慮した設計の決定でしたエンドユーザーにエクスペリエンスを追加する。

だから、現在は設計通りに動作します。パネルの開閉時に状態を保持したい場合は、関連する状態を親コンポーネントの1つに移動します。

コミュニティに十分な興味がある場合は、にオプションを追加することはできません。パネルを閉じると、パネルのコンテンツが破棄されます。