Question

我需要在语言上做一个可选的前缀。所以你可以去

random-domain.com /

将选择默认语言（en）

如果你选择了语言

random-domain.com/ru

将选择语言 - ru

这应该适用于嵌套路线

random-domain.com/some-rand-entity 和 random-domain.com/ru/some-rand-entity

我的非工作解决方案 - 一个例子

 const app_common: Routes = [ ...];
 export const app_routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    resolve: {
      settings: SettingsStore
    },
    pathMatch: 'full'
  }
];

export const lang_routes: Routes = [
  {
    path: ':lang',
    component: HomeComponent,
    resolve: {
      languages: LanguagesStore
    },
    children: app_common,
    pathMatch: 'full'
  }
];

export const routes: Routes = [
  ...app_routes,
  ...app_common,
  ...lang_routes,
  ...checkoutRoutes
];

Answer 1

您可以将路线参数用于此目的

 export const app_routes: Routes = [
  {
    path: '', 
    component: HomeComponent,
    resolve: {
      settings: SettingsStore
    },
    pathMatch: 'full',
    children: app_common
  },
  {
    path: ':lang',
    component: HomeComponent,
    resolve: {
      settings: SettingsStore
    },
    children: app_common,
  }
];

另见https://angular.io/docs/ts/latest/guide/router.html#!#route-parameters

Answer 2

应该使用查询参数来处理

url?lang=en

不是路径参数

url/en  // don't do this

要在routerLinks中添加查询参数，您可以

<a [routerLink]="..." [queryParams]="{ lang: 'en' }" >link</a>

要使用Router以编程方式执行，您可以使用

this.router.navigate(['...'], { queryParams: { lang: 'en' }});

要访问组件中的查询参数，ActivatedRoute具有queryParams属性

this.route.queryParams.subscribe(params => {})

我们还可以保留查询参数，因此我们不需要继续应用它们。在routerLink我们会做

<a [routerLink]="..." [queryParams]="{ lang: 'en' }" preserveQueryParams>link</a>

在Router我们会做

this.router.navigate(['...'], { preserveQueryParams: true});

这样做的是，当当前路线附加了查询参数时，当我们导航时，参数将被自动附加。

另见：

如何在角度2中创建可选的根状态？

2 个答案: