增量在上一个，下一个按钮Angular 4中不起作用答案

【问题标题】：Incrementing doesn't work in prev, next buttons Angular 4增量在上一个，下一个按钮Angular 4中不起作用
【发布时间】：2017-07-04 07:44:18
【问题描述】：

我必须创建一个 prev 和 next 组件才能使用来自 Angular 的路由器转到下一页。问题不在于角度，而在于递增和递减逻辑。

当我第一次点击下一步是可以的，但第二次我必须点击两次才能看到下一页。 prev 按钮也是如此。如果我想点击返回，在我第一次点击next之后，我必须点击两次才能进入prev页面。

我看了又看，没有看到错误在哪里。

HTML 文件

<button class="btn btn-primary" (click)="prevPage()">Prev</button>  
<button class="btn btn-primary" (click)="nextPage()">Next</button>

TS 文件

pages = [
 {name: '../page1', index: 0}, 
 {name: '../page2', index: 1}, 
 {name: '../page3', index: 2}
];
current = this.pages[0];

getIndex(currentIndex: number, shift: number){
 const lenght = this.pages.length;
 const incre = (((currentIndex + shift) + lenght) % lenght);
 console.log(incre);
 return incre;
}

prevPage() {
 const i = this.getIndex(this.current.index, -1);
 this.current = this.pages[i];
 this.router.navigate([this.current.name], { relativeTo: this.route });
 console.log(this.current.name);  
}

nextPage() {
 const i = this.getIndex(this.current.index, 1);
 this.current = this.pages[i];
 this.router.navigate([this.current.name], { relativeTo: this.route });
 console.log(this.current.name);   
}

【问题讨论】：

标签： javascript angular

【解决方案1】：

在 HTML 文件中。

<button class="btn btn-primary" (click)="prevPage()">Prev</button>  
<button class="btn btn-primary" (click)="nextPage()">Next</button>

将（点击）监听器更改为 nextPage()。

另外，

中的（+长度）没有意义

const incre = (((currentIndex + shift) + lenght) % lenght);

没有它也能正常工作！

const incre = ((currentIndex + shift) % 长度);

【讨论】：