Angular 如何将ngx完美滚动条应用于ag网格

我一直在兜圈子，想申请工作。我可以让两者分开工作，但我想用完美的滚动条完全替换datatable上的默认滚动条

我已按照以下要求设置了我的模块：

在我的模板中：

<perfect-scrollbar class="psc">
    <ag-grid-angular #agGrid style="width:100%;height:100%" class="ag-dark"
                     [gridOptions]="gridOptions"
                     [rowData]="rowData">
    </ag-grid-angular>
</perfect-scrollbar>

但我也不能让它工作；我刚刚收到“无默认导出”错误

---

欢迎指点。感谢您尝试像这样导入完美的滚动条：

import * as perfectScrollbar from 'perfect-scrollbar';

private runPerfectScrollbar() {
const agBodyViewport = window.document.getElementsByClassName('ag-body-viewport')[0];
this.perfectScrollbar = new PerfectScrollbar(agBodyViewport);
this.perfectScrollbar.update();

---

然后可以使用perfectScrollbar.initialize（）和perfectScrollbar.update（）

尝试像这样导入完美的滚动条：

import * as perfectScrollbar from 'perfect-scrollbar';

private runPerfectScrollbar() {
const agBodyViewport = window.document.getElementsByClassName('ag-body-viewport')[0];
this.perfectScrollbar = new PerfectScrollbar(agBodyViewport);
this.perfectScrollbar.update();

---

然后可以使用perfectScrollbar.initialize（）和perfectScrollbar.update（）

我在ag网格中实现了它：

从“perfect scrollbar”导入PerfectScrollbar；（所以我没有使用ngx perfect scrollbar，只是使用基本perfect scrollbar包）

您可以稍后根据需要执行此操作，但对于测试，请将样式从完美的滚动条复制到您的组件，以保持ag栅格的角度；对于测试，请切换到viewenclosuration.None

我在ngAfterViewInit组件的lifehook中运行它，它保持ag网格的角度。但它也可能是一个aggridready事件 . 我在ngAfterViewInit中调用的方法如下所示：

import * as perfectScrollbar from 'perfect-scrollbar';

private runPerfectScrollbar() {
const agBodyViewport = window.document.getElementsByClassName('ag-body-viewport')[0];
this.perfectScrollbar = new PerfectScrollbar(agBodyViewport);
this.perfectScrollbar.update();

}

那么你需要关心一些案件。例如，在调整列大小时，我正在ag grid的（dragStarted）事件上运行此.perfectScrollbar.destroy（）。我再次调用这个runPerfectScrollbar（），当（dragStopped）

如果您在firefox set

SuppressColumnVirtualization:window.navigator.userAgent.toLowerCase（）.indexOf（'firefox'）>-1上看到性能问题？真：假。

（当然，用某种方法写得更好；）

但令我惊讶的是，它为我解决了其他一些问题。例如，我在firefox上没有更多的延迟。在safari上，我在overscroll上没有橡皮筋效果

---

我也不确定ag网格中的所有设置。我有我的观点。所以我只能显示有限的行。但是如果您有一些问题，我会尽力帮助您。

我在ag grid angular中实现了它：

从“perfect scrollbar”导入PerfectScrollbar；（所以我没有使用ngx perfect scrollbar，只是使用基本perfect scrollbar包）

您可以稍后根据需要执行此操作，但对于测试，请将样式从完美的滚动条复制到您的组件，以保持ag栅格的角度；对于测试，请切换到viewenclosuration.None

我在ngAfterViewInit组件的lifehook中运行它，它保持ag网格的角度。但它也可能是一个aggridready事件 . 我在ngAfterViewInit中调用的方法如下所示：

import * as perfectScrollbar from 'perfect-scrollbar';

private runPerfectScrollbar() {
const agBodyViewport = window.document.getElementsByClassName('ag-body-viewport')[0];
this.perfectScrollbar = new PerfectScrollbar(agBodyViewport);
this.perfectScrollbar.update();

}

那么你需要关心一些案件。例如，在调整列大小时，我正在ag grid的（dragStarted）事件上运行此.perfectScrollbar.destroy（）。我再次调用这个runPerfectScrollbar（），当（dragStopped）

如果您在firefox set

SuppressColumnVirtualization:window.navigator.userAgent.toLowerCase（）.indexOf（'firefox'）>-1上看到性能问题？真：假。

（当然，用某种方法写得更好；）

但令我惊讶的是，它为我解决了其他一些问题。例如，我在firefox上没有更多的延迟。在safari上，我在overscroll上没有橡皮筋效果

---

我也不确定ag网格中的所有设置。我有我的观点。所以我只能显示有限的行。但是如果您有一些问题，我会尽力帮助您。

在ag grid angular中添加完美滚动条的步骤（水平+垂直）。

---

将完美的滚动条库从添加到package.json文件

在ag网格中导入库使用的组件

从“完美滚动条”导入完美滚动条

使用

perfect scrollbar.css

将此css添加到style.css文件中

.ag实体视口、.ag实体水平滚动视口{
位置：相对位置；
溢出：隐藏！重要；
}

将模板引用变量添加到HTML并传递到grid ready事件

在组件中，按如下所示添加此方法以初始化滚动

onGridReady（参数：any，gridContainer）{
让数组=[“.ag主体视口”、“.ag主体水平滚动视口”]
array.forEach（元素=>{
let container=gridContainer.querySelector（元素）
if（集装箱）{
const ps=新的滚动条（容器）；
ps.update（）；
}
});
}

---

将ag grid angular中的完美滚动条添加到angular 7应用程序的步骤（水平+垂直）。

---

将完美的滚动条库从添加到package.json文件

在ag网格中导入库使用的组件

从“完美滚动条”导入完美滚动条

使用

perfect scrollbar.css

将此css添加到style.css文件中

.ag实体视口、.ag实体水平滚动视口{
位置：相对位置；
溢出：隐藏！重要；
}

将模板引用变量添加到HTML并传递到grid ready事件

在组件中，按如下所示添加此方法以初始化滚动

onGridReady（参数：any，gridContainer）{
让数组=[“.ag主体视口”、“.ag主体水平滚动视口”]
array.forEach（元素=>{
let container=gridContainer.querySelector（元素）
if（集装箱）{
export class TableComponent {
    public width: number = null; // This must be null otherwise it does not work properly after calling the sizeColumnsToFit function

    @ViewChild(PerfectScrollbarDirective, { static: false })
    public directiveRef?: PerfectScrollbarDirective;

    public config: PerfectScrollbarConfigInterface = {};

    public constructor(private store: Store<AppState>, private elementRef: ElementRef) {}

    public onColumnResized(): void {
        this.updateTableWidth();
    }

    private updateTableWidth(): void {
        const agBodyViewport: HTMLElement = this.elementRef.nativeElement.querySelector(".ag-body-viewport");
        if (agBodyViewport) {
            if (agBodyViewport) {
                this.width = agBodyViewport.scrollWidth > agBodyViewport.offsetWidth ? agBodyViewport.scrollWidth : null;
                this.directiveRef.update();
            }
        }
    }
}