web-dev-qa-db-ja.com

Bootstrap 4scrollspyが動作しないAngular 4

Angular 4..angular-cli.jsonファイルにjQueryとBootstrap.jsをインポートしました。コンソールでエラーが発生しません。ただし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>
twitter-bootstrapangularscrollspy
11
Rahul Dagli

私の場合は、まだngOnInitを使用して動作します。以下のリンクでplukrを確認できます。

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

注意してください。

1。 Bootstrap navが必要です

Scrollspyは現在、アクティブなリンクを適切に強調表示するためにBootstrap navコンポーネントを使用する必要があります。したがって、 ここ からコードのブロックを取得するだけで十分です。

2。相対位置が必要

スクロールしているコンテンツにposition: relative;を追加します。私のプランカーには、基本的にスクロールを作るためにそれと高さを追加しました。

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

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/

0
Kapil Thakkar