Pasek przewijania Bootstrap 4 nie działa z Angular 4

Question

Próbuję zaimplementować scrollspy w Angular 4. Zaimportowałem jQuery i Bootstrap.js do pliku .angular-cli.json. Nie daje żadnego błędu w konsoli. Jednak klasa active nie zostanie zastosowana do elementu li zgodnie z oczekiwaniami.

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> 

Answer 1

To działa w moim przypadku, nadal używa ngOnInit. Możesz sprawdzić plukr na poniższym linku.

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

Proszę wziąć pod uwagę.

1. Wymaga Bootstrap nav

Scrollspy wymaga obecnie używania składnika nav Bootstrap dla prawidłowego wyróżnianie aktywnych linków. Więc po prostu pobierz blok kodu z here zrobi.

2. Wymaga pozycjonowania względnego

Dodaj position: relative; w treści, gdzie jesteś na przewijanie. W moim plunkr, dodałem go i wysokość, aby zrobić zwoju w zasadzie.

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

Answer 2

W kanciastym możemy zrobić, używając fragment, ale niektóre, jak to nie działa. Na razie możemy użyć starej metody z kanciastą.

<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> 

przyzwyczajenie przeładować stronę tak bez utraty danych (jeśli jakieś pola wejściowe)

Przykład: http://embed.plnkr.co/9ayZcAceHfL5jVz83Hk9/