如何在 Angular 7 项目中使用 bootstrap scrollspy？

Question

我用 bootstrap scrollspy 组件转换了基本的 html 页面，但我的导航不起作用（页面滚动时没有变化）。

我已经使用以下命令安装了 bootstrap 4：

npm install bootstrap

页面滚动没有变化，或者当我点击菜单时没有“活动”标志。

你能帮帮我吗？谢谢:)

Answer 1

使用directive 为spyScroll 检查解决方案here。它侦听页面上的滚动事件并突出显示当前视图中的部分。

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

@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);
        }
    }

}

在 AppComponent 中：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  currentSection = 'section1';

  onSectionChange(sectionId: string) {
    this.currentSection = sectionId;
  }

  scrollTo(section) {
    document.querySelector('#' + section)
    .scrollIntoView();
  }
}

AppComponent.html：

 <h1>Current Section : [{{currentSection}}]</h1>


<h2>Menu</h2>
<div (click)="scrollTo('section1')" [ngClass]="{ 'current-section': currentSection === 'section1' }">Section 1 
</div>
<div (click)="scrollTo('section2')" [ngClass]="{ 'current-section': currentSection === 'section2' }">Section 2 
</div>
<div (click)="scrollTo('section3')" [ngClass]="{ 'current-section': currentSection === 'section3' }">Section 3
</div>
<div (click)="scrollTo('section4')" [ngClass]="{ 'current-section': currentSection === 'section4' }">Section 4 
</div>
<br/>


<div id="parentDiv" scrollSpy [spiedTags]="['DIV']" (sectionChange)="onSectionChange($event)" style="height:150px;overflow-y: scroll;">
  <div id="section1">
    <h2 style="margin:0">Section 1</h2>
    <lorem-ipsum></lorem-ipsum>
  </div>
  <div id="section2">
    <h1>Section 2</h1>
    <lorem-ipsum></lorem-ipsum>
  </div>
  <div id="section3">
    <h1>Section 3</h1>
    <lorem-ipsum></lorem-ipsum>
  </div>
  <div id="section4">
    <h1>Section 4</h1>
    <lorem-ipsum></lorem-ipsum>
  </div>
</div>
<br/>

在 app.component.css 中：

.current-section {
  background-color: cornflowerblue
}
.current-section::after { 
  content: "\039e";
  background-color: yellow; 
  color: red;

}