[英]trigger ng-bootstrap accordion component with typescript(javascript)?
[英]ng-bootstrap: accordion reinitializes component
我在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();
}
};
}
https://ng-bootstrap.github.io/#/components/accordion的当前实现假定只有活动(可见)面板shell保留在DOM中。 这是一个有意识的设计决定,因为保持周围不可见的面板意味着:
所以,目前的东西按设计工作。 如果要在面板打开/关闭时保留状态,一个选项是将相关状态移动到其中一个父组件。
如果对社区有足够的兴趣,我们可能会添加一个选项,以便在关闭时不会破坏面板的内容。
NgbAccordion
有输入选项destroyOnHide
。 它需要是假的。 看看这里的文档。 示例: <ngb-accordion [destroyOnHide]="false">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.