Question

我正在尝试在Angular 4中实现scrollspy。我在.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>

Answer 1

它适用于我的情况，仍然使用ngOnInit。您可以在下面的链接上查看plukr。

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

请注意。

<强> 1。需要Bootstrap导航

Scrollspy目前需要使用Bootstrap导航组件来正确突出显示活动链接。所以，只需从here抓取一段代码即可。

<强> 2。需要相对定位

在您要滚动的内容中添加position: relative;。在我的plunkr中，我添加它和基本上制作卷轴的高度。

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

Bootstrap 4 scrollspy无法使用Angular 4

2 个答案: