Question

我在业余时间使用Angular编写网站。我大部分都完成了。没有很多内容，所以我选择只显示所有组件并允许用户滚动浏览。我决定要通过更改与该组件相对应的导航按钮的背景来根据滚动位置突出显示您当前在网站中的位置。如果您是第一次加载该网站，或者您从页面的顶部单击刷新，这将非常有效，但是如果您向下滚动一点，则高度的计算会有所不同，并且无法按预期工作。

我仍在学习，所以我什至不确定这是否是最好的解决方案，但这就是我写的：

键入脚本以查找当前的活动组件。

@HostListener('window:scroll')
checkForActiveComponent() {
  this.calculateScrollHeight();

  if (!this.haveHeightsBeenCalculated) {
    this.calculateHeights();
    this.haveHeightsBeenCalculated = true;
  }

  if (this.scrollHeight >= this.homeHeight) {
    this.currentActive = 1;
  }
  if (this.scrollHeight + (window.innerHeight / 2) >= this.aboutHeight) {
    this.currentActive = 2;
  }
  if (this.scrollHeight + (window.innerHeight / 2) >= this.bridesmaidsHeight) {
    this.currentActive = 3;
  }
  if (this.scrollHeight + (window.innerHeight / 2) >= this.groomsmenHeight) {
    this.currentActive = 4;
  }
  if (this.scrollHeight + (window.innerHeight / 2) >= this.ringBearersHeight) {
    this.currentActive = 5;
  }
  if (this.scrollHeight + (window.innerHeight / 2) >= this.dogsHeight) {
    this.currentActive = 6;
  }
  if (this.scrollHeight === 0) {
    this.currentActive = 0;
  }
}

计算内容高度的功能：

  calculateHeights(): void {
    const pageTop = document.body.getBoundingClientRect().top;
    this.homeHeight = document.querySelector('#home').getBoundingClientRect().top - pageTop;
    this.aboutHeight = document.querySelector('#info').getBoundingClientRect().top - pageTop;
    this.bridesmaidsHeight = document.querySelector('#bridesmaids').getBoundingClientRect().top - pageTop;
    this.groomsmenHeight = document.querySelector('#groomsmen').getBoundingClientRect().top - pageTop;
    this.ringBearersHeight = document.querySelector('app-ringbearer').getBoundingClientRect().top - pageTop;
    this.dogsHeight = document.querySelector('#dogs').getBoundingClientRect().top - pageTop;
  }

HTML：

                <li [ngClass]="{'active': currentActive === 1}">
                  <a appNavScroll>Home</a>  
                </li>
                <li [ngClass]="{'active': currentActive === 2}">
                  <a appNavScroll>Info</a>  
                </li>
                <li [ngClass]="{'active': currentActive === 3}">
                  <a appNavScroll>Bridesmaids</a>  
                </li>
                <li [ngClass]="{'active': currentActive === 4}">
                  <a appNavScroll>Groomsmen</a>  
                </li>
                <li [ngClass]="{'active': currentActive === 5}">
                  <a appNavScroll>Ring Bearers</a>  
                </li>
                <li [ngClass]="{'active': currentActive === 6}">
                  <a appNavScroll>Dogs</a>  
                </li>

我一直在尝试不同的定位计算，但是每次我重新计算时，它甚至都无法在页面顶部的第一次init /刷新中工作，因此我至少要恢复到最初的状态，加载。还有其他人在Angular 2中完成过类似的工作吗，可以帮助我弄清楚如何在获得刷新时获取一致的数字，无论您身在何处？

角度/打字稿：可以从window.pageYOffset = 0处计算div的绝对位置吗？

0 个答案: