Angular NGBOOTSTRAPP SCROLLESPY没有高度就不能工作

由于它似乎无法满足我的需求，我决定通过两个指令创建自己的scrollspy元素:

1. scrollTo指令将负责滚动到按下li链接的部分

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[scrollTo]'
})
export class ScrollToDirective {

  @Input() target = '';
  constructor() { }

  @HostListener('click')
  onClick() {
    const targetElement = document.querySelector(this.target);
    if(targetElement)
      targetElement.scrollIntoView({block: 'start',behavior: 'smooth', inline:'nearest'});
  }
}

2. scrolledTo指令将负责在滚动到当前元素时进行检测

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[scrolledTo]',
  exportAs: 'scrolledTo'
})
export class ScrolledToDirective {
  @Input() isLast:boolean = false;
  focus = false;

  constructor(public el: ElementRef) { }

  @HostListener('window:scroll', ['$event'])
  onWindowScroll() {
    const elementPosition = this.el.nativeElement.offsetTop;
    const elementHeight = this.el.nativeElement.clientHeight;

    //you can change the check according to your requirements
    const scrollPosition = window.pageYOffset - window.screen.height / 2 ;
    this.focus = scrollPosition >= elementPosition && scrollPosition <= elementPosition + elementHeight;
    if(this.isLast)
      this.focus = scrollPosition >= elementPosition;

  }
}

而html将如下所示

<div>
    <div class="sticky-top">
        <ul class="nav menu-sidebar">
            <li >
                <a scrollTo target="#about" [class.active]="scrolledToElement1.focus">About</a>
            </li>
            <li >
                <a scrollTo target="#schedule" [class.active]="scrolledToElement2.focus">Schedule</a>
            </li>
            <li >
                <a scrollTo target="#hotel" [class.active]="scrolledToElement3.focus">Information about the hotel</a>
            </li>
        </ul>
    </div>

    <div >
        <section scrolledTo #scrolledToElement1="scrolledTo" id="about">
            <h3>About</h3>
            <p>{{some long long text and content}}</p>
        </section>
        <section scrolledTo #scrolledToElement2="scrolledTo" id="schedule">
            <h3>Schedule</h3>
            <p>{{some long long text and content}}</p>
        </section>
        <section scrolledTo #scrolledToElement3="scrolledTo" id="hotel">
            <h3>Information about the hotel</h3>
            <p>{{some long long text and content}}</p>
        </section>
    </div>
</div>

学分:

• scrollTo directive个
• scrolledTo directive个