Question

滚动到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>

Answer 1

您可以使用@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

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

1 个答案: