Angular 2 - Bootstrap 3 - 导航栏水平滚动答案

【问题标题】：Angular 2 - Bootstrap 3 - navbar horizontal scrollAngular 2 - Bootstrap 3 - 导航栏水平滚动
【发布时间】：2017-02-08 22:05:16
【问题描述】：

我有一个要求，我的辅助导航栏是根据来自服务器的数据动态生成的。我需要一个类似于这个的控件-->

我需要在左右两边都有箭头标记，以允许用户滚动浏览项目。我在这里找到了一些使用 JQuery 的示例代码。 http://www.bootply.com/l2ChB4vYmC 但我需要使用 Angular 2 和 Bootstrap 3 来实现这一点。有类似的东西吗？

【问题讨论】：

标签： angular twitter-bootstrap-3 scroll menu nav

【解决方案1】：

Angular 2 不需要类似的东西。你也可以在 Angular 2 中使用它。这是一个plunkr 显示的内容。

  @Component({
  selector: 'my-app',
  template: `
    <div class="container">
      <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
      <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
      <div class="wrapper">
        <ul class="nav nav-tabs list" id="myTab">
          <li *ngFor="let tab of tabs" class="{{tab.active ? 'active' : ''}}">
            <a href="#{{tab.name}}">{{tab.name}}</a>
          </li>
      </ul>
      </div>
    </div>
  `,
  })
  export class App {
    tabs: any[] = [];

    constructor() {
      for(var i = 1; i < 21; i++){
        this.tabs.push({
          name: "Tab" + i,
          active: i === 1 ? true : false
        });
      }
    }

    ngAfterViewInit(){
      //Do jquery stuff to access the DOM
    }
  }

【讨论】：

非常感谢易卜拉欣。这太棒了。

【解决方案2】：

或者你可以使用这个非常容易使用的 Angular 库 -

https://www.npmjs.com/package/angular2-drag-scroll

【讨论】：