文章/答案/技术大牛

发布

社区首页 >问答首页 >引导4滚动间谍不使用角4

问引导4滚动间谍不使用角4
EN

Stack Overflow用户

提问于 2017-08-02 10:27:50

回答 2查看 6.1K关注 0票数 11

我试图在角4中实现滚动间谍，我已经在.ang-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-bootstrap

angular

scrollspy

回答 2

Stack Overflow用户

发布于 2017-09-14 05:57:53

它在我的例子中工作，仍然使用ngOnInit。您可以在下面的链接上查看plukr。

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

请注意。

1.需要引导导航器

目前，滚动间谍需要使用引导导航组件来正确高亮显示活动链接。因此，只需从这里获取一段代码就可以了。

2.需要相对定位

将position: relative;添加到正在滚动的内容中。在我的柱塞，我增加了它和高度，使卷轴基本上。

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

票数 6

Stack Overflow用户

发布于 2018-03-07 06:40:51

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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45458250

复制

相似问题

问引导4滚动间谍不使用角4
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4滚动间谍不使用角4EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4滚动间谍不使用角4
EN