Angular 5中的参数化路由

Question

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

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

并且有以下信息：

  

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

     

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

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

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

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

2. 我可以使用UrlMatcher但是当我更改previos url细分时，这可能会有些问题。所以这个功能应该做好充分准备。

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

Answer 1

根据Angular official documentation refer 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 },
];

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

注意：

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

由于＆＃39; blog / moo＆＃39; 更具体，您需要将其置于＆＃39; blog /：id＆＃39; <之上/ p>

I have created a PLUNKER for your example

Answer 2

in

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