Bootstrap 4 scrollspyがAngular 4で動作しない

Question

私はangle4でscrollspyを実装しようとしています。jQueryとBootstrap.jsを.angular-cli.jsonファイルにインポートしました。それはコンソールに何のエラーも与えません。しかし、activeクラスは、期待通りにli要素に適用されていません。それはまだngOnInitを使用して、私の場合には動作します

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

。以下のリンクからplukrを確認することができます。

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

に注意してください。

1.

は

Scrollspyは、現在アクティブなリンクの適切なハイライトのためのブートストラップのナビゲーションコンポーネントを使用する必要がブートストラップNAVが必要です。だから、ちょうどhereからのコードのブロックをつかむだけです。

2.相対的な位置に

が必要ですあなたがスクロールされているコンテンツにposition: relative;を追加します。私の冥王星では、基本的にスクロールを行うために、それと高さを加えました。

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

Answer 2

角度で私たちはfragmentを使用して行うことができますが、いくつかは動作しません。 今のところ、角度付きの古いメソッドを使用できます。

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