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

【问题标题】：How to make an optional root state in angular 2?如何在角度 2 中创建可选的根状态？
【发布时间】：2016-10-10 13:33:57
【问题描述】：

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

random-domain.com/

将选择默认语言（zh）

如果你选择了语言

random-domain.com/ru

将选择语言 - ru

这应该适用于嵌套路由

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

我的无效解决方案 - 示例

 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
];

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案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

【讨论】：

它应该是可选的
是的，但是孩子呢？没有工作的孩子，但有 - 没有
我猜你需要在两条路由中添加相同的子节点。
在两个父状态：''和“lang”我看到无法匹配任何路由：''或无法匹配任何路由：'ru'当我添加孩子时
尝试删除语言路径上的pathMatch: 'full'（只保留在空路径路径上）。

【解决方案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});

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

另请参阅：

【讨论】：