Angular 6, как установить меню Navbar активным, когда пользователь переходит к div id

Question

Как я могу получить идентификатор div, когда прокручиваю до div.

Моё приложение angular 6 - это одностраничное приложение, которое, когда пользователь нажимает на навигационную панель, страница перемещается к div id (я использую ngx-scroll-to).

Я сделал, когда пользователь щелкнул меню навигационной панели, он переместился в div и установил класс активным.

Моя проблема в том, когда пользователь прокручивает вручную, как я могу установить меню навигационной панели активным, когда онодоберитесь до идентификатора div.

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