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 然后应该调用 AareadetailComponent
http://localhost:8080/:page-handle 然后应该调用 StaticpagesComponent

问题：域后的任何名称进入以下路由：

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

有人知道我该如何解决吗？

Answer 1

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

来自 angular 路由文档。

The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes.

Source

Answer 2

根据你定义的路由，应该是：

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

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

Issue in Dynamic Routing after domain name in Angular 4+

angularjs

angular

angular-ui-router

angular4-router