如何根据Angular 4中的滚动位置将活动类添加到导航栏？

Question

我想突出显示菜单中的活动部分。与此类似： https://v4-alpha.getbootstrap.com/components/scrollspy/

我试过这个插件：https://www.npmjs.com/package/ng2-scrollspy但看起来它只与Angular 2兼容，而不是最新版本。

我也在加载bootstrap 4库。

导航菜单

<nav>
  <ul class="menu">
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
    <li>
      <a href="#other1">Other1</a>
    </li>
  </ul>
</nav>

内容

<h1 id="about">About</h1>
...
<h1 id="contact">Contact</h1>
...
<h1 id="other1">Other1</h1>