Question

关于此问题已经得到解答的建议，该答案提出了一种解决方案，该解决方案无法解决我的用例。

引用的答案建议使用2条路线，因此我的问题的标题规定而不必定义第二条路线使用2条路线会产生有问题的浏览器历史记录。
如果可以避免，我不想使用查询字符串参数或哈希。
我不想使用子路由，因为这需要使用辅助路由器插座，这会增加我的应用程序的复杂程度，我必须相信这是可以避免的。
< / LI>

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

路线：

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

此路由正确加载需要:name参数，但:type参数是可选的。

我尝试定义了两个不同的路由，并将两者都设置为指向相同的组件，一个带参数，一个没有，但在我的情况下这不是一个有效的解决方案。

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

因此，这是问题的初始路由条目。第一次定义:type参数后，后续更改不需要更改路径。

我想问一下，具体而言，是否可以为Angular中的路线定义可选参数？

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

Answer 1

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

虽然这仍然无法解决初始实例化没有存在的参数仍需要导航到到达的事实>参数存在。我试图避免在浏览器中触发重新加载。

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

Angular docs on optional params

经过大量的挖掘后，我还看到了这段视频Angular Tutorial on Parameterized Routes，它实际上涵盖了我的用例，如何在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将获取矩阵参数并使其可作为路径参数访问。

具有讽刺意味的是，使用矩阵参数还有其他含义，因此这可能不是一个明智的方法。有关详细信息，请参阅此question/answer。

所以，你可能会像我一样思考，那么差异是什么？为什么不只是使用查询字符串参数？ see this on differences between matrix and query

在Angular中，使用可选参数实现路由而不必定义第二条路径的正确方法是什么？

1 个答案: