Angular - 多个可选路由参数

Question

我不敢相信我在 SO 中找不到这种情况： （我发现每条路线都有带和不带附加参数的示例，但这是不可接受的）

所以我有

RouterModule.forRoot([      
  {
      path: 'home',
      component: HomeComponent
  },
  {
      path: 'news',
      component: NewsComponent
  },     
  {
      path: 'newsDetail/:id',
      component: NewsDetailComponent
  },  
...
})

所以示例 URL 将是

http://somewhere.com/home 
http://somewhere.com/news
http://somewhere.com/newsDetail/10

如果我想为每个 URL 添加可选参数，我可以直接在 URL 中显式调用另一个本地化（用于永久链接）：

http://somewhere.com/home/en 
http://somewhere.com/news/en
http://somewhere.com/newsDetail/10/en

所以它应该在最后使用和不使用“/en” - 当然添加到每条路线（与可选/：语言相同的路线）不是答案（想象一下涉及几十页，其中很多已经有自己的参数）

Answer 1

如果您希望语言参数是第一个，您可以执行以下操作。您首先必须声明一个空应用程序或任何根组件，并在引导程序中使用它而不是 AppComponent：

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class RootComponent {}

然后从您当前的路线创建一个模块，如果您还没有的话。叫它AppRoutingModule。

export const AppRoutes: Routes = [      
  { path: 'home', component: HomeComponent },
  { path: 'news', component: NewsComponent },     
  { path: 'newsDetail/:id', component: NewsDetailComponent }
];

@NgModule({
  imports: [RouterModule.forFeature(AppRoutes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

然后创建一个RootRoutingModule，它会变魔术：

export const RootRoutes: Routes = [      
  { path: '', loadChildren: () => import('./app.module').then((m) => m.AppModule) },
  { path: 'en', loadChildren: () => import('./app.module').then((m) => m.AppModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(AppRoutes)],
  exports: [RouterModule],
})
export class RootRoutingModule {}

问题在于，您必须对您可能支持的所有语言进行硬编码，因为我认为 :language 参数不起作用

所以基本上，创建一个根模块来执行语言路由和引导