Angular 同一个页面，不同的路由和内容

Question

想象一下，我的 angular 应用程序中有两种类型的路由：

/football和/basketball我为这些路线设置了单独的组件。

现在我有详细信息页面。 详细信息页面非常复杂，足球和篮球的详细信息页面布局相同，所以我有一个组件和类似的路线： /details ，而不是/football/details或/basketball/details 。 这些是小游戏，在详情页我可以同时打开足球和篮球比赛，所以我认为/football/details或/basketball/details路线的实现在逻辑上是错误的。

布局是相同的，但我需要在详细信息页面内做一些不同的事情，具体取决于我从足球页面或篮球页面打开详细信息页面，所以我应该知道我在足球详细信息页面或篮球详细信息页面上。 那么解决此类问题的最佳路由架构是什么？ 我的意思是我应该使用 queryParams 吗？ 或者我做错了什么？ 最佳做法是什么？

Answer 1

在上述场景中，要确定您从哪个路由登陆到组件页面，您可以使用 queryparams 或在路由模块中传递数据 object。以下是两者的用例。

1) this.router.navigate(['/path'], { queryParams: { type: 'football'} });
2) {
    path: '',
    component: detailsComponent,
    data: {
      type: 'football'
    }
  }

Answer 2

如果它是具有不同功能的同一页面，我建议将/details路由与queryParams一起使用 - 然后创建一个服务来处理自定义逻辑。