使用 ngx-translate 更改 Angular 5 中语言更改的页面 URL

【问题标题】：Change page URL on language change in Angular 5 with ngx-translate使用 ngx-translate 更改 Angular 5 中语言更改的页面 URL
【发布时间】：2018-05-23 19:28:37
【问题描述】：

问题是，如何使用ngx-translate更改语言更改路由模块中定义的URL路由？

挑战在于路线是预先定义的，我找到的唯一可能的解决方案是this one，但这并不是我想要的。

我需要在每次语言更改时更改路径 home_[lang]（例如），如下所示：

https://baseurl/home_en

到

https://baseurl/home_es

每次用户更改语言时。

有可能吗？

我也看到了this issue，但仍然不适合我。

【问题讨论】：

标签： angular ngx-translate

【解决方案1】：

也许您可以有一个接收 home_language 的父路由并有子路由。像这样：

const  appRoutes: Routes = [
  { path: ':home_language', component: LanguageComponent, children: [
    //all your toutes here
    { path: 'route1', component: Component1 },
    { path: 'route2', component: Component2 }
  ] }
];

所以你会有这样的路线：

/home_es/route1
/home_es/route2
/home_en/route1
/home_en/route2

在 LanguageComponent 模板中，您应该添加一个 router-outlet，这样子路由中的组件就会被加载到那里。

<router-outlet></router-outlet>

【讨论】：