时间戳

首页 > 解决方案 > 在 Ionic 和 Angular 中实现 Jquery 代码时遇到问题

jquery - 在 Ionic 和 Angular 中实现 Jquery 代码时遇到问题

问题描述

我正在使用 Ionic 3/Anuglar 5 试图为组件中的一个非常高的表格设置一个浮动的水平滚动条。我遇到了这个应该很好用的解决方案。html表格的浮动水平滚动条

http://jsfiddle.net/cowboy/45rEs/show/

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

$('.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>

标签： jqueryangularionic-frameworkionic3

解决方案

您要做的第一件事是在您的 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

推荐阅读