2017-07-04 11 views
0

角度からルータを使用して次のページに進むには、前と次のコンポーネントを作成する必要がありました。問題は角張っているのではなく、論理の増減についてです。前の次のボタンではインクリメントが機能しません角度4

次回初めてクリックするとOKですが、2回目に次のページを表示するには2回クリックする必要があります。以前のボタンでも同じことが起こっています。クリックすると、最初に次のページをクリックした後、2回クリックすると前のページに移動します。

私は見て、私は見て、バグはどこに見えません。

HTMLファイル

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

TSは、HTMLファイル内に

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

答えて

1

を提出します。

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

リスナーをnextPage()に変更します。

プラス、

CONSTのincre =(((currentIndex +シフト)+な長さ)%のな長さ)に(+長さ)を感知するれていません。

それなしで正常に動作します。

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

関連する問題