Inkrementieren funktioniert nicht in den Tasten prev, next. Winkel 4

Question

Ich musste eine vorherige und nächste Komponente erstellen, um mit dem Router von Angular zur nächsten Seite zu gelangen. Es geht nicht um Winkel, sondern um die inkrementierende und dekrementierende Logik.

Wenn ich das nächste Mal klicke, ist es OK, aber das zweite Mal muss ich zweimal klicken, um die nächste Seite zu sehen. Das Gleiche passiert mit der Schaltfläche "Zurück". Wenn ich zurückklicken möchte, nachdem ich als nächstes geklickt habe, muss ich zweimal klicken, um zur vorherigen Seite zu gelangen.

Ich schaute und ich schaute und nicht sehen, wo der Fehler ist.

HTML-Datei

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

Answer 1

in der HTML-Datei-Datei.

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

Ändern Sie den (Klick-) Listener auf nextPage().

plus, ist es nicht die (+ length) sind sinnvoll in

const INCRE = (((Momentan + shift) + Länge)% Länge);

es funktioniert gut ohne !.

const ink = ((aktuellerIndex + Verschiebung)% Länge);