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然后应该打电话 StaticpagesComponent

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

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

谁知道我怎么解决？

Answer 1

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

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

Answer 2

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

来自角度路线文件。

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

Source

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

2 个答案: