Angular 2 - Bootstrap 3 - 導航欄水平滾動

Question

我有一個要求，我的輔助導航欄是根據服務器的數據動態生成的。我需要一個類似於此的控制 - >

我需要在左側和右側有箭頭標記以允許用戶滾動瀏覽項目。我在這裏找到了一些使用JQuery的示例代碼。 http://www.bootply.com/l2ChB4vYmC 但我需要使用Angular 2和Bootstrap 3來實現這一點。有沒有類似的可用？

Answer 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 
    } 
    } 

Answer 2

OR你可以使用這個非常容易使用的角度圖書館 -

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