Как использовать Scrollspy & Affix в Angular 2

Я заметил, что вы не можете использовать в angular 2 компонентах bootstrap, таких как data-spy="affix"

Кто-нибудь знает, как использовать аффикс и scrollspy в angular 2? (Пример)

Ответ 1

Вы можете написать свою небольшую директиву, которая будет делать то же самое. Я делюсь своим кодом:

Директива

@Directive({
 selector: '[scrollPoint]'
})
export class ScrollPointDirective {
   @Input() scrollPoint: number;
   constructor(
    @Inject(DOCUMENT) private document: Document,
    private renderer: Renderer,
    private el: ElementRef
 ) { }

   @HostListener('window:scroll', [])
   onWindowScroll() {
      const windowScroll = this.document.body.scrollTop;
      if (windowScroll > this.nsgScrollPoint) {
        //add class to the native element
        this.renderer.setElementClass(this.el.nativeElement, 'sticky-nav', true);
      } else {
        //remove class from native element
        this.renderer.setElementClass(this.el.nativeElement, 'sticky-nav', false);
      }

   }

 }

Параметр @Input scrollPoint может быть передан из вашего HTML

HTML:

 <div [scrollPoint]="235">
    <ul class="nav-stacked">
       //your code
    </ul>
 </div>

Добавьте CSS в класс, добавленный в директиве:

CSS

.sticky-nav {
  position: sticky;
  top: 90px;
  bottom: 0;
 }

Мне также не удалось интегрировать аффикс на angular2, но это сделало это для меня. Надеюсь, что это поможет.

Ответ 2

Вам не нужна директива для получения этой работы (Angular 5.0).

1) Убедитесь, что загрузочный загрузчик 3 загружен <script src="assets/js/bootstrap.min.js"></script>

2) Нужно идентифицировать элемент, в котором видна прокрутка переполнения. <aside class="affix-mc" data-spy="affix" data-target=".main-body" data-offset-top="20">

Если ваша полоса прокрутки не создана из window, вам нужно указать data-target

3) Тема вашего элемента немного, например. &.affix { width: 180px }

Этот подход даже работает для страницы, встроенной внутри дочерних роутеров.