Bootstrap 4 scrollspy не работает с Angular 4

Я пытаюсь реализовать scrollspy в Angular 4. Я импортировал jQuery и Bootstrap.js в файл .angular-cli.json. Это не дает никаких ошибок в консоли. Однако класс active не применяется к элементу li, как ожидалось.

https://v4-alpha.getbootstrap.com/components/scrollspy/

header.component.ts

ngOnInit() {
    $(document).ready(() => {
        $('body').scrollspy({target: "#myNavbar", offset: 50});   
    });
}

header.component.html

<div class="navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li><a href="#PATIENT IDENTIFICATION">Section 1</a></li>
    <li><a href="#INITIATION">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#section41">Section 4-1</a></li>
        <li><a href="#section42">Section 4-2</a></li>
      </ul>
    </li>
  </ul>
</div>

Ответ 1

Он работает в моем случае, все еще используя ngOnInit. Вы можете проверить plukr по приведенной ниже ссылке.

http://embed.plnkr.co/JXujqbPCGXU47fccaEL6/

Пожалуйста, обратите внимание.

1. Требуется Bootstrap nav

Scrollspy в настоящее время требует использования компонента загрузки Bootstrap для правильного выделения активных ссылок. Так просто просто возьмите блок кода из здесь.

2. Требуется относительное позиционирование

Добавьте position: relative; в свой контент, на котором вы прокручиваете. В моем plunkr я добавил его и высоту, чтобы сделать прокрутку в основном.

.scrollspy-example {
    position: relative;
    height: 200px;
    margin-top: .5rem;
    overflow: auto;
}

Ответ 2

В angular мы можем использовать fragment, но некоторые из них не работают. Пока мы можем использовать старый метод с angular.

<div class="row">
 <div class="col-md-8">
  <div id="anyId1">
  .
  .
  .
  .
  </div>
  <div id="anyId2">
  .
  .
  .
  .
  </div>
 </div>
 <div class="col-md-4">
    <a href="/componentPath#anyId1"> 1 </a>
    <a href="/componentPath#anyId2"> 2 </a>
 </div>
<div>

он не перезагрузит страницу, поэтому НЕТ ПОТЕРЯ ДАННЫХ (если какие-либо поля ввода)

Пример: http://embed.plnkr.co/9ayZcAceHfL5jVz83Hk9/