语言更改时始终重定向到主页 - 带有本地化路由器的 Angular2

Question

我正在开发 Angular2 应用程序，它使用 ngx-translate 进行文本翻译，并使用 localize-router 将语言附加到路由 url。

现在，在不使用 localize-router 的情况下，一切正常，我可以更改语言（通过下拉按钮）并查看应用的文本翻译。

安装 localize-router 后，如果我加载主页，我可以看到语言已正确附加到 url。但问题是，当我更改语言时，组件 (localize-router) 将用户重定向到主页（新语言名称附加到 url）而不是保留在当前页面。

所以在网站加载时，语言被正确附加，如果我尝试导航，url 被正确翻译，但是当我在不同于主页的页面上时，我尝试更改语言，我被重定向到附加了新语言的主页。

这是我的文件和配置：

app.module.ts

@NgModule({
imports: [
 TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http]
        }
    }),

    RouterModule.forRoot(routes,{useHash: true}),
    LocalizeRouterModule.forRoot(routes),

app.routes.ts

const appRoutes: Routes = [
{

    path: '', 
    component: DefaultLayoutComponent,
    children: [
        {
            path: '',
            component: HomeComponent,
            pathMatch: 'full'
        },
        {
            path: 'error',
            component: ErrorComponent
        },
        {
            path: 'dashboard',
            children: [
                {
                    path: 'home',
                    component: DashboardComponent,
                    canActivate: [AuthGuard]
                },

app.component.ts

@Component({
selector: 'my-app',
template: '<router-outlet></router-outlet>',    
moduleId: module.id,
})


 export class AppComponent implements OnInit {

constructor(
    private translate: TranslateService,
    public router: Router,

) {

    this.translate.addLangs(['ita', 'eng']);
    this.translate.setDefaultLang('ita');
    this.translate.use('ita');

DefaulLayoutComponent.html

... my html common section ...
<router-outlet></router-outlet>
... the remaining common html section ...

topbar.component.ts 它处理菜单栏，当我单击下拉菜单时，将调用以下函数（在 topbar 组件内）：

changeLanguage(lang: string){
  this.translate.use(lang);
  this.localizeService.changeLanguage(lang);

topbar.component.html（我刚写的按钮模板）

<button (click)="changeLanguage('ita')">ITA</button>
<button (click)="changeLanguage('eng')">ENG</button>

文件夹结构

- app
  - app.module.ts
  - app.component.ts
  - other "main" stuff
  - components
    - defaultLayout
      - defaultLayoutComponent.ts
      - defaultLayoutComponent.html
    - other components

使用的软件版本为：

"@angular/common": "~2.4.1",
"@angular/compiler": "~2.4.1",
"@angular/compiler-cli": "~2.4.1",
"@angular/core": "~2.4.1",
"@angular/forms": "~2.4.1",
"@angular/http": "~2.4.1",
"@angular/platform-browser": "~2.4.1",
"@angular/platform-browser-dynamic": "~2.4.1",
"@angular/platform-server": "~2.4.1",
"@angular/router": "~3.2.3",
"@angular/upgrade": "~2.4.1",   
"@ngx-translate/core": "^6.0.1",
"@ngx-translate/http-loader": "^0.1.0",
"localize-router": "^0.7.1",

我无法从 angular2 升级到 angular4 或更高版本。

那我做错了什么？

为什么当我在这个页面中时：

http://mywebsite/#/ita/login

我更改了重定向到的语言

http://mywebsite/#/eng ?

我猜问题是否出在我的路由配置中，如果我打印 ActivatedRouteSnapshot 对象的 toString（独立于当前页面），我总是得到

  Route(url:'', path:'')

Answer 1

将topbar.component.js改为：

changeLanguage(lang: string){
  this.translate.use(lang);
  this.localizeService.translateRoute(this.router.url);
}

这将转换给定的路由，而不是重定向到文档根目录 /。并且 this.router.url returns 当前路径，您的用户当前所在的位置。

最后不要忘记将 router 添加为您的顶部栏组件的依赖项。

Answer 2

尽量坚持 localize-router 存储库的工作示例和文档。将 changeLanguage() 函数缩减为：

changeLanguage(lang: string){
  this.localizeService.changeLanguage(lang);
}

Documentation

changeLanguage(lang: string, extras?: NavigationExtras, useNavigateMethod?: boolean): Translates current url to given language and changes the application's language. extras will be passed down to Angular Router navigation methods. userNavigateMethod tells localize-router to use navigate rather than navigateByUrl method. For german language and route defined as :lang/users/:user_name/profile

Source

Answer 3

正如我所想，问题出在路由配置上，实际上我创建了 DefaultLayoutComponents 只是为了让所有页面都有一个共同的布局。

解决方法是删除DefaultLayoutComponent，将所有视图代码移至app.component.html并修改路由配置，删除DefaultLayoutComponent的层级：

const appRoutes: Routes = [
{
    {
        path: '',
        component: HomeComponent,
        pathMatch: 'full'
    },
    {
        path: 'error',
        component: ErrorComponent
    },
    {
        path: 'dashboard',
        children: [
            {
                path: 'home',
                component: DashboardComponent,
                canActivate: [AuthGuard]
            },

因为本地化路由在子路由上使用 ActivatedRouteSnapshot 循环。

通过之前的路由配置，DefaultLayoutComponents 的子组件似乎是空的。

语言更改时始终重定向到主页 - 带有本地化路由器的 Angular2

Always Redirected To Home On Language Change - Angular2 with Localize-Router

javascript

localization

url-routing

typescript

angular2-routing