Angular 4+中域名后的动态路由问题

Question

在我的 Angular 4 项目中，我在路由上有一个容器组件：

    const appRoutes: Routes = [
    { path: '', component: HomeComponent},
    { path: '404', component: NotfoundComponent},
    { path: 'pages/:page-handle', component: StaticpagesComponent },
    { path: 'blog/:blog-handle', component: StaticpagesComponent },
    { path: 'idx', component: ListingComponent },
    { path: 'area/:area-name', component: AreadetailComponent },
    { path: 'zip-code/:zip-name', component: ZipdetailComponent },
    { path: ':agent-handle', component:AgentComponent },
    // otherwise redirect to home
    { path: '**', redirectTo: '404' }
];

所以我想在域名之后访问不同的组件 例如

• http://localhost:8080/:zip-name 然后应该调用 ZipdetailComponent

• http://localhost:8080/:area-name 然后应该调用 AreadetailComponent

• http://localhost:8080/:page-handle 然后应该调用 静态页面组件

问题：域后的任何名称都会进入以下路径：

 { path: ':agent-handle', component:AgentComponent },

谁知道我该如何解决？

Answer 1

路线的顺序很重要。您应该在通配符匹配之前最后定义 '' 路由，以便在没有其他匹配项时匹配。

来自角度路线文档。

配置中路由的顺序很重要，这是设计使然。路由器在匹配路由时使用先匹配获胜策略，因此应将更具体的路由放在不太具体的路由之上。

Source

Answer 2

根据您定义的路线，应该是：

http://localhost:8080/zipcode/:zip-name  
http://localhost:8080/area/:area-name  
http://localhost:8080/pages/:page-handle