在 Angular 中,使用可选参数实现路由而无需定义第二条路由的正确方法是什么?



至于这个问题已经得到回答的建议,该答案提出了一种无法解决我的用例的解决方法。

  • 引用的答案建议使用 2 条路由,因此我的问题标题规定不必定义第二条路由使用 2 条路由会产生有问题的浏览器历史记录。

  • 如果可以避免,我不想使用查询字符串参数或哈希。

  • 不想使用子路由,因为这需要使用辅助路由器插座,这将增加我的应用程序的复杂性,我必须相信这是可以避免的。

我的路线有 2 个参数,一个是可选的。这是一条懒惰的加载路线,但我认为这应该无关紧要,因为它与我的问题有关。如果确实重要,请告诉我。

路线:

{ path: 'list/:name/:type', loadChildren: './list/list.module#ListModule'},

:name参数是正确加载此路由所必需的,但:type参数是可选的。

我尝试定义 2 个单独的路由并将它们设置为指向同一组件,一个带有参数,一个没有,但就我而言,这不是一个可行的解决方案。

我希望浏览器的历史记录是正确的,并通过用户交互反映可选:type参数的添加或更新,而无需导航到导致组件重新加载的另一个路由。

因此,问题出在初始路由条目上。首次定义:type参数后,后续更改将不需要更改路径。

我想问一下,具体来说,是否可以在 Angular 中为路由定义一个可选参数?

或者,作为此问题的解决方案,是否可以在路由实例化后更新路由/URL,而不会触发导航?

事实证明,Angular确实提供了一种使用可选参数的方法。

尽管这仍然不能解决这样一个事实,即不存在参数的初始实例化仍然需要导航才能到达存在参数同一路由。我试图避免在浏览器中触发重新加载。

谢谢你@johnsharpe指出这一点,我不知道我是如何错过的。它的预期用途解决了需要更复杂的 url 结构的情况,但这是正确的答案。

可选参数上的角度文档

经过大量的挖掘,我还看到了这个视频 关于参数化路由的角度教程 它实际上涵盖了我的用例,如何在 Angular 中定义可选参数以及为什么您可能需要使用一个参数来维护功能浏览器导航。Veselin Davidov上面引用的答案创建了一个有问题的浏览器历史记录。如何?原因在视频中大约 11 分钟进行了解释。

要将路由参数实现为可选参数,请首先定义一个不存在可选参数路由。以我的情况为例,我仅使用所需的:name参数定义我的路由:

{ path: 'list/:name', loadChildren: './list/list.module#ListModule'},

然后,当从我的应用程序中导航到此路由时,我可以定义可选的:type参数,例如使用具有键/值对的对象:

this.router.navigate['list', name, {type:value}];

取而代之的是:

this.router.navigate['list', name, type];

此方法使用矩阵 url 表示法。生成的 url 有一个分号,如下所示:

mysite.com/list;type=value

当共享和/或重新加载此生成的 url 时,Angular 将选取矩阵参数并使其作为路由参数访问。

具有讽刺意味的是,使用矩阵参数还有其他含义,因此这可能不是一种可取的方法。有关更多详细信息,请参阅此问题/答案。

所以,你可能会像我一样想,那么有什么区别呢? 为什么不改用查询字符串参数? 请参阅矩阵和查询之间的差异

最新更新