下一個和上一個元素angular2

Question

大家好，我是angular2的新手

嘗試了幾種方法來實現這種功能（請看jsfiddle）。

我需要的是單擊它，將活動類添加到下一個元素，並從當前元素中刪除，對於Prev btn。反之亦然，因此將顯示下一個元素，並且將隱藏上一個元素。 添加/刪除類或添加刪除樣式可能對我有用..或其他任何可以實現這種目的的東西

我剛剛用jQuery實現了它。

但是我只想用Angular2來實現它，任何事情都對我有用

的HTML：

<ul>
  <li class="active">item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

<button  class="prev">prev</button> <button class="next">Next</button>

jQuery的：

$('.next').click( function(){
    $('.active').next().addClass('active').prev().removeClass('active')
})
$('.prev').click( function(){
    $('.active').prev().addClass('active').next().removeClass('active')
})

https://jsfiddle.net/svgmc125/

編輯：

使用@pixelbits幫助的幫助更新的代碼

現在HTML將是

  <li>
      <my-component></my-component>
  </li>
  <li>
      <my-component-1></my-component-1>
  </li>

  <li [class]="slides[selectedIndex] == slide ? 'active': ''" 
                 *ngFor="let slide of slides">
    <img src="../../assets/images/onboarding/slides/{{slide}}.png" alt="">
  </li>
  <li>
      <my-component-2></my-component-2>
  </li>
  <li>
      <my-component-3></my-component-3>
  </li>

ts：

export class SlidesComponent{

  slides: any[];
    selectedIndex: number;
    constructor() {
        this.selectedIndex = 0;
        this.slides = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    }

    next() {
       ++this.selectedIndex;
    }

    previous() {
        --this.selectedIndex;
    }

 }

對於循環的<li>一切正常，但是剩余的<li>仍然有問題

Answer 1

您需要做的就是在組件中擁有一個引用活動項目（或其索引）的字段：

items: Array<string> = ['first', 'second', 'third'];
activeItem: string = items[0];

previous() {
    const currentIndex = this.items.indexOf(this.activeItem);
    const newIndex = currentIndex === 0 ? this.items.length - 1 : currentIndex - 1;
    this.activeItem = this.items[newIndex];
}

next() {
    const currentIndex = this.items.indexOf(this.activeItem);
    const newIndex = currentIndex === this.items.length - 1 ? 0 : currentIndex + 1;
    this.activeItem = this.items[newIndex];
}

並在視圖中：

<div *ngFor="let item of items" [class.active]="item === activeItem">{{ item }}</div>

Answer 2

<ul>
  <li #item class="active">item1</li>
  <li #item>item2</li>
  <li #item>item3</li>
</ul>

@ViewChildren('item') items:QueryList<ElementRef>;

ngAfterViewInit() {
  var active = this.items.toArray()
      .filter(i => i.nativeElement.classList.contains('active'));
  console.log(active[0].nativeElement);
}

Answer 3

在組件類中需要兩個模型：items數組和selectedIndex。 根據selectedIndex處的項目是否等於該項目來綁定class 。

@Component({
   selector: 'list',
   template: `
      <ul>
          <li [class]="items[selectedIndex] == item ? 'active': ''" 
                 *ngFor="let item of items">{{ item }}</li>
      </ul>
   `
})
class MyComponent {
    items: string[];
    selectedIndex: number;
    constructor() {
        this.selectedIndex = 0;
        this.items = ["item1", "item2","item3"];
    }

    next() {
       ++this.selectedIndex;
    }

    previous() {
        --this.selectedIndex;
    }

}

Answer 4

在處理Angular和jQuery時，您對問題的想法需要有所不同。 在Angular中，將HTML / View視為代碼中數據模型的直觀反映會很有幫助。

舉例來說，假設您有一個類似的組件：

@Component({
  template: `
    <ul>
      <li [class.active]="current == 0">item1</li>
      <li [class.active]="current == 1">item2</li>
      <li [class.active]="current == 2">item3</li>
    </ul>

    <button class="prev" (click)="previous()">prev</button> 
    <button class="next" (click)="next()">Next</button>
  `
})
export class ListComponent {
   current = 0;

   next() {
     if (current == 0) {
       current = 2;
     } else {
       current = current - 1;
     }
   }

   next() {
     current = (current + 1) % 3;
   }
}

上面的組件將實現您所描述的功能。 但更重要的是要了解Angular的含義。 您應該始終嘗試設想要在組件中顯示的原始數據，並在組件中實現邏輯以根據需要更改該數據。 這樣，您的模板就可以簡單地成為數據的可視化表示形式，並帶有掛鈎的邏輯，可以根據用戶輸入更改數據。

因此，在給出的示例中，[class.active] =“ current == 0”表示要根據當前變量是否為零來添加或刪除活動類。

並且（click）=“ previous（）”意味着每當從該按鈕觸發click事件時，都將調用類中的上一個方法。

Answer 5

您可以使用ng-class來基於li項的當前索引來active類。

HTML

<div ng-controller="MainController as main">
  <ul>
    <li ng-class="{'active' : main.active == 1}">item1</li>
    <li ng-class="{'active' : main.active == 2}">item2</li>
    <li ng-class="{'active' : main.active == 3}">item3</li>
  </ul>

  <button class="prev" ng-click="main.back()">prev</button>
  <button class="next" ng-click="main.next()">Next</button>
</div>

控制器

var app = angular.module('plunker', []);

app.controller('MainController', function() {

  this.active = 1;

  this.max = 3;

  this.next = function(){
    this.active++;
    if(this.active > this.max) this.active = this.max;
  }

  this.back = function(){
    this.active--;
    if(this.active < 1) this.active = 1;
  }
});

http://plnkr.co/edit/7p6IxAnGstTWVsrrR8FX?p=preview