ng-bootstrap : 아코디언은 구성 요소를 다시 초기화합니다.

Question

ngb-accordion을 ng-bootstrap에 사용하고 있습니다. 헤더를 전환하면 하위 구성 요소가 다시 초기화됩니다. 예를 들어, 헤더를 토글하면 드롭 다운이 재설정됩니다. 패널이 숨겨져있을 때 <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> 

구성 요소 타이프 라이터 파일 :

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에 보관한다고 가정합니다. 그 내용은이

각도가 눈에 보이는 '과'돈 '없는 부분에 변화 검출을 실행해야 표시되지 않을 경우에도 초기화됩니다

• 이는 것을 의미 주위에 보이지 않는 패널을 유지하는 등의 의식적인 디자인 결정이었다 최종 사용자에게 경험을 추가하십시오.

따라서 현재 설계된대로 작동합니다. 패널이 열리거나 닫힐 때 상태를 보존하려면 한 가지 옵션은 관련 상태를 상위 구성 요소 중 하나로 이동하는 것입니다.

커뮤니티에 충분한 관심이있는 경우 에 옵션을 추가하지 않을 수 있습니다. 패널의 콘텐츠가 삭제 된 경우 해당 패널의 콘텐츠를 삭제할 수 있습니다.