Bootstrap 4 Scrollspy不適用於Angular 4

我試圖在Angular 4中實現Scrollspy。我在.angular-cli.json文件中導入了jQuery和Bootstrap.js。它不會在控制檯中給出任何錯誤。但是，active類沒有像預期的那樣應用於li元素。Bootstrap 4 Scrollspy不適用於Angular 4

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>

來源

2017-08-02 Rahul Dagli

你有低於此相應的ID，如''

？ –

是它的存在。 –

你有沒有試過[ngx-scrollspy]（https://github.com/JonnyBGod/ngx-scrollspy）？ – CornelC

它工作在我的情況下，仍然使用ngOnInit。你可以在下面的鏈接上檢查plukr。

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

請注意一下。

1.需要自舉NAV

Scrollspy目前需要用於激活鏈接的合適的突出顯示了使用自舉NAV組分。所以簡單地只需從here中獲取一塊代碼即可。

2.需要相對定位

添加position: relative;在你的內容，你是滾動的。在我的plunkr中，我添加了它並且基本上創建了滾動的高度。

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

來源

2017-09-14 05:57:53 trungk18

是不是有一個角度2/4的方式？不使用jQuery？ – mast3rd3mon

這不是一個非常有角度的方式，但這是我對這個問題的回答，因爲他使用了相同的方法，但它不起作用。 – trungk18

可能是因爲它不是角？ '$'是一個angularjs特性，但他詢問的是angular4 – mast3rd3mon

在角度上，我們可以使用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/

來源

2018-03-07 06:40:51

Bootstrap 4 Scrollspy不適用於Angular 4

回答

相關問題