ng-bootstrap:手风琴重新初始化组件 [英] ng-bootstrap: accordion reinitializes component

问题描述

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

I'm using ngb-accordion in ng-bootstrap. Toggling a header causes its child components to reinitialize. For example, toggling headers cause dropdowns to reset. It looks like this is because <div class="card-block"></div> is deleted when the panel is hidden.

即使手风琴中的组件被隐藏"，如何保持组件的状态?

How do I maintain the state of components even when they're "hidden" in the accordion?

模板文件:

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

推荐答案

https://ng-bootstrap.github.io/#/components/accordion 假定仅活动(可见)面板外壳保留在DOM中.这是一个有意识的设计决定，因为将不可见的面板保持在周围将意味着:

The current implementation of https://ng-bootstrap.github.io/#/components/accordion assumes that only active (visible) panels shell be kept in the DOM. This was a conscious design decision as keeping non-visible panels around would mean that:

• 即使从未显示，它们的内容也会被初始化
• Angular必须对不可见的零件运行更改检测，并且不会为最终用户增加体验.

因此，当前事物按设计工作.如果要在打开/关闭面板时保留状态，一种选择是将相关状态移动到父组件之一.

So, currently things work as designed. If you want to preserve state when a panel gets opened / closed one option would be to move relevant state to one of a parent components.

如果社区有足够的兴趣，我们可以添加一个选项，以在关闭面板时不销毁面板上的内容.

If there is enough interest in the community we might add an option to not destroy panels' content when those are closed.

这篇关于ng-bootstrap:手风琴重新初始化组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！