Angular 5中的参数化路线

Question

基于此处的LINK-在我的应用中，我已路由：

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

并且有以下信息：

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

重要说明：非参数化路由优先于参数化路由。

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

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

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

2. 我可以使用UrlMatcher，但是当我更改previos url段时可能会有些问题。因此，此功能应做好充分的准备。

你怎么看？有任何想法吗？

Answer 1

根据Angular official documentation 参考这个

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

• 路由器使用第一个匹配获胜策略选择路由。通配符路由是路由配置中最不明确的路由。确保这是配置中的最后一条路由。

• 路由在配置中的顺序很重要，这是
  设计使然。路由器在匹配
  路由时会使用“先赢”策略，因此应将更具体的路由放在不那么具体的
  路由之上。在上面的配置中，
  首先列出具有静态路径的路由，然后是与
  默认路由匹配的空路径路由。通配符路由排在最后，因为它与每个URL匹配，并且仅当没有其他路由最先匹配时才应选择通配符路由。

即使这样，关于路由优先级的解释也相同

因此，您应保持相反的路线：

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

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

注意：

应将更具体的路线放置在不太具体的路线上方。

由于'blog / moo'更具体，因此您需要将其放在'blog /：id'上方

我为您的示例创建了一个PLUNKER