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

回答

相关问题