Bootstrap 4 scrollspy 不适用于 Angular 4答案

【问题标题】：Bootstrap 4 scrollspy not working with Angular 4Bootstrap 4 scrollspy 不适用于 Angular 4
【发布时间】：2017-08-02 10:27:50
【问题描述】：

我正在尝试在 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>

【问题讨论】：

下面有没有对应的ID，比如<div id="INITIATION"></div>？
是的。
你试过ngx-scrollspy吗？

标签： twitter-bootstrap angular scrollspy

【解决方案1】：

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

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

请注意。

1.需要引导导航

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

2。需要相对定位

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

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

【讨论】：

不是有 angular2/4 方式吗？不使用 jquery？
这不是一种真正有角度的方式，但这是我对这个问题的回答，因为他使用的是相同的方法，但没有奏效。
可能是因为它不是有角度的？ $ 是一个 angularjs 功能，但他正在询问 angular4
因此，如果您正在寻找不使用 jQuery 和 Bootstrap 编写的 Angular 4 解决方案，谷歌上有很多此类解决方案可以为您完成。如果你想重用 Bootstrap 中的 scrollspy，那么是的，我们需要 jQuery，因为 Boostrap 需要 jQuery 才能工作。如果您想使用自定义指令以 Angular 方式获得答案，我们也可以提供帮助，但看起来几乎相同。
我自己尝试了几种方法，包括 3 个不起作用的插件

【解决方案2】：

在 Angular 中，我们可以使用 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/

【讨论】：