[英]Recalculate ngx-datatable on Click Event from another Directive
I have a Side Navigation with a docking feature and a data table in Main View.我在主视图中有一个带有停靠功能和数据表的侧边导航。 Upon un-docking the side navigation, the data table in Main View does not recalculate (this will leave some empty space that the Side Navigation came from) so I need to recalculate manually upon click.
取消停靠侧导航后,主视图中的数据表不会重新计算(这会留下一些空白空间是侧导航的来源),因此我需要在单击时手动重新计算。 However, problem lies in the fact that the Side Navigation and Data Table are two different directives.
然而,问题在于侧导航和数据表是两个不同的指令。
PS. PS。 I have multiple modules with different data table names
我有多个具有不同数据表名称的模块
Same Problem here: https:\/\/github.com\/swimlane\/ngx-datatable\/issues\/193#issuecomment-334809144<\/a>同样的问题:
https<\/a> :\/\/github.com\/swimlane\/ngx-datatable\/issues\/193#issuecomment-334809144
I made it using MutationObserver<\/code> which tracks style change for left menu and sets
DatatableComponent<\/code> width.
我使用
MutationObserver<\/code>制作它,它跟踪左侧菜单的样式更改并设置
DatatableComponent<\/code>宽度。
import { Directive, ElementRef, Host, OnDestroy, Self } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';
@Directive({ selector: '[sidePanelToggle]' })
export class SidePanelToggleDirective implements OnDestroy {
private changes: MutationObserver;
wasVisible: boolean | undefined;
constructor(
private elementRef: ElementRef,
@Host() @Self() private tableComponent: DatatableComponent
) {
const tableElement = this.elementRef.nativeElement as HTMLElement;
this.changes = new MutationObserver((mutations: MutationRecord[]) => {
mutations.forEach((mutation: MutationRecord) => {
const sideNavElement = mutation.target as HTMLElement;
const isVisible = sideNavElement?.style.visibility === 'visible';
if (this.wasVisible !== undefined) {
if (this.wasVisible && !isVisible || !this.wasVisible && isVisible) {
if (tableElement.style.width) {
tableElement.style.width = `${tableElement.offsetWidth + (isVisible ? -sideNavElement.offsetWidth : sideNavElement.offsetWidth)}px`;
}
else if (isVisible) {
tableElement.style.width = `${tableElement.offsetWidth - sideNavElement.offsetWidth}px`;
}
this.tableComponent.recalculate();
}
}
this.wasVisible = isVisible;
});
});
document.querySelectorAll('mat-sidenav').forEach(element => {
this.changes.observe(element, { attributeFilter: ['style'] });
});
}
private static floatOrZero(value: any) {
const result = parseFloat(value);
return isNaN(result) ? 0 : result;
}
ngOnDestroy(): void {
this.changes.disconnect();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.