angular - Angular 路由器中的 Scrollspy 效果

Question

我正在尝试将 Scrollspy 效果添加到 Angular 项目中。当用户单击链接而不是将其显示为新页面时，该组件应该向上滚动并且下一个组件应该到达该位置。有没有办法通过路由在 Angular 中做到这一点？单击链接时，页面应像以下 jquery 代码一样动画滚动到顶部

$('html, body').animate({scrollTop: offsetTop}, 'normal');

Angular 中有任何库或功能吗？

Answer 1

我一直在寻找一些非常简单的方法来处理滚动，我最终制定了自己的指令:

@Directive({
  selector: '[scrollSpy]'
})
export class ScrollSpyDirective {
  @Input() public spiedTags = [];
  @Output() public sectionChange = new EventEmitter<string>();
  private currentSection: string;

  constructor(private _el: ElementRef) {}

  @HostListener('scroll', ['$event'])
  onScroll(event: any) {
    let currentSection: string;
    const children = this._el.nativeElement.children;
    const scrollTop = event.target.scrollTop;
    const parentOffset = event.target.offsetTop;
    for (let i = 0; i < children.length; i++) {
      const element = children[i];
      if (this.spiedTags.some(spiedTag => spiedTag === element.tagName)) {
        if (element.offsetTop - parentOffset <= scrollTop) {
          currentSection = element.id;
        }
      }
    }
    if (currentSection !== this.currentSection) {
      this.currentSection = currentSection;
      this.sectionChange.emit(this.currentSection);
    }
  }
}

Here is a demo link with routing integrated.出于某种原因，the stackblitz edition version中断 stackblitz 编辑器的滚动。