如何显示悬停在角2的下一个和上一个数据
问题描述:
我正在构建一个简单的角两个应用程序。一切工作正常。在“项目详细信息”下一个和上一个项目正常工作时,用户单击它时会显示视图中的下一个和上一个数据。但问题是,当我悬停下一个或上一个按钮时,它应该向我显示浏览器底部URL中的下一个或上一个数据。如何显示悬停在角2的下一个和上一个数据
正如在组件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]);
});
}
答
更换的两种方法(点击)与[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
});
}
您需要添加'href'值,然后才有可能。 – Smit
但是,我可以调用下一个和上一个方法,像这样[routerLink] =“nextProject()” – Sohail
你想导航到下一个记录或显示工具提示? – Aravind