Bootstrap 4 scrollspy, Açısal 4 ile çalışmaz

Question

Angular 4'te scrollspy uygulamasına çalışıyorum. JQuery ve Bootstrap.js'yi .angular-cli.json dosyasında içe aktardım. Konsolda herhangi bir hata vermiyor. Ancak active sınıfı, beklendiği gibi li öğesine uygulanmaz.

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

O benim durumumda çalışır hala ngOnInit kullanarak. Aşağıdaki linkten plukr'ı kontrol edebilirsiniz.

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

dikkate alınız.

1.

Scrollspy anda aktif bağlantıların doğru vurgulama bir özyükleme nav bileşeninin kullanımını gerektirir özyükleme nav gerektirir. Yani sadece sadece bir kod bloğu here yapacaktır.

2.

üzerinde kaydırılıyor İçeriğinizdeki position: relative; ekle nispi konumlandırması gerektirir. Benim plunkr, ekledim ve temel olarak kaydırma yapmak için yükseklik ekledim. açısal olarak

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

Answer 2

biz fragment ama bazı onun çalışmıyor nasıl kullanarak yapabilirsiniz. Şimdilik eski yöntemi açısal olarak kullanabiliriz.

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

alışkanlık sayfası yeniden yüzden YOK VERİ KAYBI (varsa giriş alanları)

Örnek: http://embed.plnkr.co/9ayZcAceHfL5jVz83Hk9/