Question

我正在构建一个简单的角度两个应用程序。一切都很好。在项目详细信息中，当用户单击它时，下一个和上一个工作正常，在视图中显示下一个和上一个数据。但问题是当我将鼠标悬停在下一个或上一个按钮时，它应该向我显示浏览器底部URL中的下一个或上一个数据。

在组件HTML中，我有routerLink，所以你可以帮助我放置什么，以便它显示下一个和以前的数据。

这是组件导航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>

我在组件中的next和previous的两种方法是

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] 并使用您的路由器和proj[this.currentProjectIndex].id的参数定义 routerLink 。

参考：

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

如何在角度2

1 个答案: