Question

嘿伙计们我是 angular2

的新手

尝试了几种方法来实现这种功能（看看jsfiddle）。

我需要的是点击它将活动类添加到下一个元素并从当前元素中移除相反，反之亦然，对于Prev btn.so将显示下一个元素并且将隐藏上一个元素。添加/删除类或添加删除样式可能对我有用..或任何其他可以实现此类事情

我刚刚用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

<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 2

您需要的只是在组件中引用一个引用活动项（或其索引）的字段：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:background="#000" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Your elements -->

    </RelativeLayout>
</ScrollView>

并在视图中：

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];
}

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 vs 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

下一个和前一个元素angular2

5 个答案: