Question

我正在使用Ionic 3 / Anuglar 5，试图在组件中为一个很高的桌子设置一个浮动的水平滚动条。我遇到了这个解决方案，应该可以很好地工作。 Floating horizontal scroll bar for html table

我遇到的问题是我不知道如何或确切地在我的组件中实现以下代码：

$('.your-div').floatingScrollbar();

到目前为止，我已经将js插件导入到我的索引中：

<script src="assets/jquery.ba-floatingscrollbar.min.js"></script>

我只是不知道该怎么做？

import { Component } from '@angular/core';
@Component({
  selector: 'tall-table',
  templateUrl: 'tall-table.html'
})
export class TallTableComponent {

  constructor() {
  }

  /*
  ** name: Ng On Init
  ** desc: 
  */
  ngOnInit(): void { 
  }

  /*
  ** name: Destroy
  ** desc: Unsubscribe
  */
  ngOnDestroy(): void {
  }

}

tall-table.html

<div id="horz-scroll-wrapper" style="width: 300px; overflow: scroll">
    <div style="height: 100%;">
        <table class='sample'>
            <tbody>
                <tr *ngFor="let row of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26]">
                    <td >abcdefghijklmnopqrstuvwxyz</td><td >ABCDEFGHIJKLMNOPQRSTUVWXYZ</td><td >1234567890</td><td >0987654321</td><td >abcdefghijklmnopqrstuvwxyz</td><td >ABCDEFGHIJKLMNOPQRSTUVWXYZ</td><td >1234567890</td><td >0987654321</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

您要做的第一件事是在Angular项目中设置jQuery（如果尚未完成）。要将jQuery与Angular一起使用，您将必须使用npm安装jQuery。

您可以引用以下链接来在Angular项目中设置jQuery：

https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176

https://stackoverflow.com/a/44653848/4140916

完成此操作后，应将相应的jQuery放入 ngAfterViewInit 生命周期挂钩中，然后它应该可以工作。

ngOnInit(): void { 
   $('.your-div').floatingScrollbar();
}

您可以在此处阅读有关生命周期挂钩的更多信息： https://angular.io/guide/lifecycle-hooks

如果仍然不起作用，则应尝试使用一些npm软件包来浮动滚动条（专门为Angular构建），如下所示： https://www.npmjs.com/package/ngx-scrollbar

无法在Ionic和Angular中实现Jquery代码

1 个答案: