如何顯示懸停在角2的下一個和上一個數據

Question

我正在構建一個簡單的角兩個應用程序。一切工作正常。在「項目詳細信息」下一個和上一個項目正常工作時，用戶單擊它時會顯示視圖中的下一個和上一個數據。但問題是，當我懸停下一個或上一個按鈕時，它應該向我顯示瀏覽器底部URL中的下一個或上一個數據。

正如在組件HTML中，我有routerLink，所以你可以幫我把什麼放，這樣它應該顯示我的下一個和以前的數據。

下面是部分NAV HTML

<div class="prev-btn"> 
    <a [routerLink]="" (click)="previousProject()" [ngClass]="{disabled: currentProjectIndex === 0}"> 
     <i class="fa fa-angle-left" aria-hidden="true"></i> <span>Prev</span></a> 
    </div> 

    <div class="next-btn"> 
    <a [routerLink]="" (click)="nextProject()" [ngClass]="{disabled: currentProjectIndex === (total-1)}"><span>Next</span> <i class="fa fa-angle-right" aria-hidden="true"></i></a> 
    </div> 

和我的下一個和以前的在成分

previousProject(){ 
this.dataService.getProjects().subscribe(
    (proj: Project[]) => { 
    if(this.currentProjectIndex !== 0){ 
     this.currentProjectIndex = this.currentProjectIndex - 1; 
     this.project = proj[this.currentProjectIndex]; 
    }else{ 
     this.currentProjectIndex = 0; 
     this.project = proj[this.currentProjectIndex]; 
    } 
    this.router.navigate(['/work', proj[this.currentProjectIndex].id]); 
    }); 

}

nextProject(){ 
this.dataService.getProjects().subscribe(
    (proj: Project[]) => { 
    if(this.currentProjectIndex !== this.total-1){ 
     this.currentProjectIndex = this.currentProjectIndex + 1; 
     this.project = proj[this.currentProjectIndex]; 
    }else{ 
     this.project = proj[this.total-1]; 
    } 
    this.router.navigate(['/work', proj[this.currentProjectIndex].id]); 
    }); 

}

Answer 1

更換的兩種方法（點擊）與[routerLink] 並定義routerLink與您的路由器和參數proj[this.currentProjectIndex].id。

參見本：

[routerLink]="['/middle', previousProject.id]"

和

[routerLink]="['/middle', nextProject.id]"

在您的組件，根據構造函數或ngOnInit你的業務邏輯定義previousProject和nextProject和價值給他們。

更新

在angular2，導航到同一個路由器不會做任何事情。因此，您可以訂閱您發送的參數更改，如下所示：

ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
    const id = params['id']; 
    // create service to get the data by using the changed 'id' parameter 
    }); 
}