Проблемы с реализацией кода Jquery в Ionic и Angular

Question

Я использую Ionic 3 / Anuglar 5, пытаюсь установить плавающую горизонтальную полосу прокрутки для очень высокой таблицы в компоненте.Я сталкивался с этим решением, которое должно работать хорошо. Плавающая горизонтальная полоса прокрутки для HTML-таблицы

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

У меня проблема в том, что я не знаю, как и где именно реализовать следующий код в моемcomponent:

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

Первое, что вам нужно сделать, это настроить jQuery в вашем проекте Angular (если вы этого не сделали). Чтобы использовать jQuery с Angular, вам нужно установить jQuery с помощью npm.

Вы можете обратиться по следующим ссылкам для настройки jQuery в проекте Angular:

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