下一个和上一个元素 angular2

Posted 2023-02-22

【中文标题】下一个和上一个元素 angular2

【英文标题】：Next and Previous elements angular2

【发布时间】：2017-07-15 10:34:40

【问题描述】：

大家好，我是 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 help 的帮助更新代码

现在 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" >
  </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> 仍然存在问题

【问题讨论】：

考虑“手风琴”以及“将类添加到其他类并从其他类中删除”的案例

【参考方案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>

【参考方案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);

【讨论】：

我已经更新了我的问题，请您阅读并相应更新您的答案

您已经接受了一个答案。无论如何，我认为其他答案更适合您的用例。

【参考方案3】：

您的组件类中需要两个模型：items 数组和 selectedIndex。绑定class 根据 selectedIndex 处的项是否等于该项。

@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;
    

【讨论】：

这对我有用，但在另一种情况下，我的 html 是 text item text 它也适用于其余 2 LI - 其他 2 LI 不是在循环中..那些有一些静态内容..但我仍然想添加/删除活动类

将静态项目也添加到列表中

其巨大的静态 HTML 在 ..从差异组件调用 我的幻灯片将是 this.slides = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

将索引 -1 和 -2 分配给您的静态项目，并在您的静态元素上使用 [class.active]="selectedIndex === -1"（或 -2）。

我添加了相同的..但是当页面加载默认情况下，活动类在具有 for 循环的 LI 上..而不是在第一个 LI 上

【参考方案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()" 表示每当从该按钮触发单击事件时调用类中的前一个方法。

【参考方案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

【讨论】：

OP 询问的是 Angular 2，而不是 AngularJS。

愿意提供参考吗？因为，你知道，我使用和教授这两个版本，因此很清楚它们的区别。

那绝对是 angular 1.x