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

问题描述

关于该问题已得到回答的建议，该答案表明了一种无法解决我的用例的解决方法。

• 所引用的答案建议使用2条路由，因此我的问题的标题规定了无需定义第二条路由，使用2条路由会创建有问题的浏览器历史记录




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




• 我不想使用子路由，因为这将需要使用辅助路由器出口，这将给我的应用程序增加一定程度的复杂性，即我必须相信这是可以避免的。

我的路线有2个参数，其中一个是可选的。这是一个延迟加载的路由，但是我认为这无关紧要，因为它与我的问题有关。

路线：

  {path：'list /：name /：type'，loadChildren：'./list/list.module#ListModule'}，
  

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

我尝试定义2条单独的路线，并将两者都设置为指向同一组件，其中一条带有该参数，而另一条则没有。在我看来，这不是可行的解决方案。

我希望浏览器的历史记录正确无误，并反映出可选的：type 参数通过用户交互而无需导航到导致组件重新加载的另一条路线。

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

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

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

解决方案

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

尽管这仍然不能解决以下事实：初始实例化不，存在的参数将 still 需要导航才能与存在的到达相同的路线。我试图避免在浏览器中触发重新加载。

谢谢您指出了这一点，我不知道我怎么想念它。它的用途是解决需要更复杂的url结构的情况，但这是正确的答案。

经过大量挖掘，我还看到了该视频，该视频实际上涵盖了我的用例，如何在Angular中定义可选参数，以及为什么，您可能需要使用一个命令来维护功能性的浏览器导航。上面引用的的答案造成了浏览器历史记录的问题。怎么样？视频中大约11分钟会解释原因。

要将路由参数实现为可选参数，首先定义一个没有可选参数存在的路由 。以我的情况为例，我仅使用必需的：name 参数定义路线：

  {路径：'list /：name'，loadChildren：'./list/list.module#ListModule'}，
  

然后从我的应用程序导航到此路由时，我可以定义 optional ：type 参数像这样使用具有键/值对的对象：

  this.router.navigate ['list'，name，{type：值}]; 
  

代替此：

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

此方法使用矩阵网址符号。生成的网址具有分号，如下所示：

  mysite.com/list;type=value 
  

共享和/或重新加载此生成的URL时，Angular将选择matrix参数并将其作为route参数进行访问。 / p>

具有讽刺意味的是，使用矩阵参数还有其他含义，因此这可能不是明智的选择。有关更多详细信息，请参见此。

那么，您可能会像我一样在思考，那么有什么区别？为什么不只使用查询字符串参数呢？

As to the suggestion that this question has already been answered, that answer suggests a workaround solution that does not solve my use case.

• The answer referenced suggests using 2 routes, hence the title of my question which stipulates without having to to define a second route Using 2 routes creates a problematic browser history.

• If avoidable, I do not want to use a query string parameter or hash.

• I do not want to use a child route because that would require the use of a secondary router outlet, which will add a level of complexity to my application that I have to believe is avoidable.

My route has 2 parameters, one being optional. It is a lazy loaded route, but I assume this should not matter as it relates to my question. If it does matter please let me know.

The route:

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

The :name parameter is required for this route to load correctly, but the :type parameter is optional.

I tried defining 2 separate routes and setting both to point to the same component, one with the parameter and one without, but this is not a working solution in my case.

I'd like the browser's history to be correct and reflect the addition of, or update to the optional :type parameter via user interaction without requiring navigation to another route causing the component to reload.

So, it is the initial route entry that is the problem. Once the :type parameter has been defined the first time, subsequent changes would not require a route change.

I'd like to ask, specifically, is it possible to define an optional parameter for a route in Angular?

Or, as a solution to this problem, is it possible to update the route / URL after the route has instantiated without triggering navigation?

解决方案

As it turns out Angular does actually offer a way to use optional parameters.

Although this still does not solve the fact that the initial instantiation without the parameter present will still require navigation to arrive at the same route with the parameter present. I was trying to avoid triggering a reload in the browser.

Thank you @johnsharpe for pointing this out i do not know how i missed it. It's intended use solves situations that require more complex url structures, but this is the correct answer.

Angular docs on optional params

After a lot of digging around, i also came across this video Angular Tutorial on Parameterized Routes which actually covers my use case, how to define an optional parameter in Angular, and why you might need to use one in-order to maintain functional browser navigation. The answer that Veselin Davidov referenced above creates a problematic browser history. How? The reason is explained approximately 11 minutes into the video.

To implement a route parameter as optional, you first define a route without the optional parameter present. Using my case as an example, i define my route with the required :name parameter only:

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

And then when navigating to this route from within my application, i can define the optional :type parameter like so using an object with key/value pairs:

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

instead of this:

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

This approach uses matrix url notation. The resulting url has a semicolon and looks like this:

mysite.com/list;type=value

When sharing and/or reloading this resulting url, Angular will pick up the matrix parameter and make it accessible as a route parameter.

Ironically though, using a matrix parameter has other implications and as such this might not be an advisable approach. See this question/answer for more detail.

So, you might be thinking, as i did, then whats the difference? why not just use a query string parameter instead? see this on differences between matrix and query

这篇关于在Angular中，使用可选参数实现路由而无需定义第二条路由的正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！