角度6如何在用户滚动到div id时将导航栏菜单设置为活动状态 [英] Angular 6 how to set navbar menu active when user scroll to div id

问题描述

如何在滚动到div时获取div id。

我的角度6应用程序是一个页面应用程序，当用户点击导航栏时，页面将滑动到div id(我使用ngx-scroll-to)。

我已经完成了，当用户单击导航栏菜单时，它将滑动到div并将类设置为活动的。

我的问题是当用户手动滚动时，如何在导航菜单到达div id时将其设置为活动。

          <li class="nav-item" [ngClass]="activeRoute=='home' ? 'active' : ''">
              <a class="nav-link " (click)="active('home')" onclick="return false;" href="#" [ngx-scroll-to]="'#home'">Home</a>
          </li>
          <li class="nav-item" [ngClass]="activeRoute=='services' ? 'active' : ''">
              <a class="nav-link" (click)="active('services')" onclick="return false;" href="#" [ngx-scroll-to]="'#services'">Services</a>
          </li>

HostListner

您可以使用@推荐答案的强大功能。从角度。

@HostListener('window:scroll', ['$event']) 
    scrollHandler(event) {
      console.debug("Scroll Event");
    }

和模板中

<div  (scroll)="scrollHandler($event)"  >
       <li class="nav-item" [ngClass]="activeRoute=='home' ? 'active' : ''">
              <a class="nav-link " (click)="active('home')" onclick="return false;" href="#" [ngx-scroll-to]="'#home'">Home</a>
          </li>
          <li class="nav-item" [ngClass]="activeRoute=='services' ? 'active' : ''">
              <a class="nav-link" (click)="active('services')" onclick="return false;" href="#" [ngx-scroll-to]="'#services'">Services</a>
          </li>
....
    </div>

请注意，上述HostListener将在Windows上调用函数 如我们所说的滚动(窗口：滚动)，如果你想这样做的话 Div scroll上的函数只需将(‘scroll’)添加到HostListener

这篇关于角度6如何在用户滚动到div id时将导航栏菜单设置为活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！