Angular 5 中的参数化路由

Question

基于LINK 从这里 - 在我的应用程序中，我已经路由：

const routes: Routes = [
 { path: 'blog/:id', component: BlogComponent },
 { path: 'blog/moo', component: MooComponent },
];

还有信息表明：

如果我们访问 /blog/moo 我们会显示 MooComponent 即使它 也匹配第一个 blog/:id 路由的路径。

重要的非参数化路由优先于参数化 路线。

不幸的是，它不是那样工作的。如果我将转到 url blog/moo，那么路由会将 moo 视为 Id 并将打开 BlogComponent。

我想知道如何解决我有两个想法：

1. 我可以改变路径。 博客/id 和博客/moo。

2. 我可以使用UrlMatcher，但是当我更改previos url 段时可能会有点问题。所以这个函数应该准备的很好。

你怎么看？有什么想法吗？

Answer 1

根据Angular official documentationrefer to this

路由器选择第一个匹配获胜策略的路由。

• 路由器选择具有第一次匹配获胜策略的路由。 通配符路由是路由中最不具体的路由 配置。确保它是配置中的最后一条路由。

• 配置中路由的顺序很重要，这是由
  设计。路由器在匹配时使用先匹配获胜策略
  路线，所以更具体的路线应该放在不太具体的上面
  路线。在上面的配置中，具有静态路径的路由是
  首先列出，然后是与
  匹配的空路径路由 默认路由。通配符路由排在最后，因为它匹配每个 URL，只有在没有其他路由首先匹配时才应该选择。

Even this explains the same regarding the route prioritization

所以你应该保持你的路线倒序：

const routes: Routes = [
 { path: 'blog/moo', component: MooComponent },
 { path: 'blog/:id', component: BlogComponent },
];

我想从以上陈述中强调一点：

注意：

更具体的路线应该放在不太具体的路线之上。

由于 'blog/moo' 更具体，您需要将其放在 'blog/:id'

上方

I have created a PLUNKER for your example

Answer 2

在

const routes: Routes = [
 { path: 'blog/:id', component: BlogComponent },
 { path: 'blog/moo', component: MooComponent },
];

试着写成：

const routes: Routes = [
 { path: 'blog/moo', component: MooComponent },
 { path: 'blog/:id', component: BlogComponent },

];

它现在应该可以工作了。在角度上，您编写路线的顺序很重要。

Answer 3

尝试切换路由定义的顺序。第一个匹配的路线总是获胜。 导航到/blog/moo 并不会触发这两个组件。

但是你可以在 MooComponent 中引用 BlogComponent