时间戳

首页 > 解决方案 > Angular 6如何在用户滚动到div id时将导航栏菜单设置为活动状态

angular - Angular 6如何在用户滚动到div id时将导航栏菜单设置为活动状态

问题描述

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

我的 Angular 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>

标签： angularangular5angular6

解决方案

您可以使用@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 将调用我们提到的窗口滚动函数 ('window:scroll') 如果您想在 div 滚动上调用此函数，只需将 ('scroll') 添加到 HostListener

推荐阅读