【问题标题】:Angular4 router conflicted URL with parameterAngular4路由器与参数冲突的URL
【发布时间】:2017-09-18 08:28:09
【问题描述】:

我有 3 条路由,一条用于应用程序模块,一条用于管理部分,最后一条用于客户端。他们在这里:

-- App routing --
export const routes: Routes = [
    { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' },
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: '**', redirectTo: 'home', pathMatch: 'full' }
];

-- Admin routing --
const routes: Routes = [
    { path: '', component: AdminComponent,
        children: [
            { path: '', redirectTo: 'evenements', pathMatch: 'full' },
            { path: 'evenements', component: AdminEventComponent }
        ]
    }
  ];
  
-- Client routing --
const routes: Routes = [
    { path: '', component: CoreComponent,
        children: [
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: ':city', component: HomeComponent }
        ]
    }
  ];

问题是当我尝试去http://myDomain/admin时,路由器尝试将/admin解析为:city,这是核心路由中的一个参数。

如何告诉 Angular 的路由器将 http://myDomain/admin 解析为 /admin,如果其他值则解析为 :city ?

谢谢

更新: 我通过更改我的应用程序模块中声明的模块的顺序解决了这个问题,我必须在 ClientModule 之前导入 AppRoutingModule ......这看起来很奇怪,但它有效。

更新 2: update1 没有解决这个问题,路由器在颠倒导入顺序时忽略了客户端路由器模块

【问题讨论】:

  • 你为什么使用路径参数类型路由:city
  • 因为我需要它向用户展示一个城市的信息
  • 这是一个动态参数,我需要在我的 URL 中有 http://myDomain/City1http://myDomain/City2 并提供正确的信息
  • 对不起,我弄错了
  • 我建议您从 admin 和 client 路由中仅删除顶层组件,然后使用 path 。当您使用延迟加载时

标签: angular routing angular-routing


【解决方案1】:

解决问题的一种方法是将路径 :city 更改为 home/:city,但这可能不是您想要做的。

编辑:删除了无效的旧答案,仅保留上述答案作为解决 OP 描述的问题的替代方法。

【讨论】:

  • 感谢您的回答,但第一个解决方案无法满足我的需求,因为我不想拥有 http://domain/home/:city 而第二个解决方案不起作用。
  • 很遗憾听到这个消息。您是否尝试在所有路由的所有路径上添加pathMatch:'full'
  • 是的,它弄得一团糟:(,我试图理解为什么路由器在尝试将其解析为 :city 之前不先检查 /admin。这让我很头疼跨度>
  • Order 对于这些路线有很多话要说。如果您的admin 在您的:city 之前,我知道这会给您带来问题。如果您还没有,请确保在 :city 之前评估您的 admin 路径。
  • 如果我在 clientModule 之前导入 adminModule 效果很好。但是,adminModule 必须是延迟加载的,这意味着我不能在应用模块中导入它。
猜你喜欢
  • 2018-10-01
  • 2017-03-22
  • 1970-01-01
  • 2015-12-06
  • 1970-01-01
  • 1970-01-01
  • 2015-10-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多