Bootstap是基于JQuery开发，Angular中不支持Bootstrap相关事件逻辑。本文基于Typecript开发了一个Angular可用的ScrollSpy控件。Scrollspy控件主要实现了左侧导航以及右侧正文之间的联动和切换。所以，
此组件主要解决两个问题：
（1）点击左侧导航列表，右侧正文能够跟随切换的焦点定位到具体的段落，即添加导航点击事件
（2）右侧正文滚动时，左侧导航列表可以根据正文滚动的位置自动定位到，该段落所属的目录索引上。即添加正文滚动事件。
1. 代码结构
1.组件代码
滚动监听指令:
监听滚动事件，并且获取当前滚动焦点的元素值（element）然后切换当前导航树位置（postion），触发positionchange事件函数。
//scrollspy.direct.ts
import { Directive, Injectable, Input, EventEmitter, Output, ElementRef, HostListener } from '@angular/core'; @Directive({
selector: '[NgScrollSpy]'
})
export class NgScrollSpyDirective { @Output() public positonChange = new EventEmitter<string>();
private currentposition: string;
private Tags = ['DIV']; constructor(private _el: ElementRef) {} @HostListener('scroll', ['$event']) //监听正文滚动事件
onScroll(event: any) {
let position: 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.Tags.some(tag => tag === element.tagName)) {
if ((element.offsetTop - parentOffset) <= scrollTop) {
position = element.id;
}
}
}
if (position !== this.currentposition) {
this.currentposition = position;
this.positonChange.emit(this.currentposition);
}
} }
通过scrollTo(position :string)函数获取左侧导航树点击位置，并操作DOM定位到对应位置。
通过onPositionChange(position: string)函数获取右侧正文的滚动位置。
//ngscrollspy.component.ts
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-ngscrollspy',
templateUrl: './ngscrollspy.component.html',
styleUrls: ['./ngscrollspy.component.css']
})
export class NgscrollspyComponent implements OnInit { constructor() { } ngOnInit() {
} currentPostion = 'Phase1'; // 正文滚动事件 设置当前滚动位置，供NgScrollSpyDirective使用
onPositionChange(position: string) {
this.currentPostion = position;
} // 导航点击事件 查找目录节点别切换到节点
scrollTo(position :string) {
document.querySelector('#' + position)
.scrollIntoView();
}
}
html
//ngscrollspy.component.html
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<h2>导航</h2>
<div (click)="scrollTo('phase1')">段落1
<ng-container *ngIf="currentPostion==='phase1'">++</ng-container>
</div>
<div (click)="scrollTo('phase2')">段落2
<ng-container *ngIf="currentPostion==='phase2'">++</ng-container>
</div>
<div (click)="scrollTo('phase3')">段落3
<ng-container *ngIf="currentPostion==='phase3'">++</ng-container>
</div>
<div (click)="scrollTo('phase4')">段落4
<ng-container *ngIf="currentPostion==='phase4'">++</ng-container>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div id="phases" NgScrollSpy (positonChange)="onPositionChange($event)" style="height:150px;overflow-y: scroll;">
<div id="phase1">
<h2 style="margin:0">段落 1</h2>
<PhaseText></PhaseText>
</div>
<div id="phase2">
<h1>段落 2</h1>
<PhaseText></PhaseText>
</div>
<div id="phase3">
<h1>段落 3</h1>
<PhaseText></PhaseText>
</div>
<div id="phase4">
<h1>段落 4</h1>
<PhaseText></PhaseText>
</div>
</div>
</div>
</div>
</div>
详细代码可以访问github仓库