Question

我已使用bootstrapscrollspy组件转换了基本的html页面，并且我的导航不起作用（页面滚动时无变化）。

我使用以下命令安装了引导程序4：

npm install bootstrap

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

你能帮我吗？谢谢：）

Answer 1

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

spyScroll

在AppComponent中：

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.html：

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

在app.component.css中：

 <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/>

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

1 个答案: