如何显示悬停在角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 
    }); 
}