Всегда перенаправлен на дом при смене языка - Angular2 с Localize-Router

Question

Я работаю над приложением Angular2, которое использует ngx-translate для перевода текста и localize-router, чтобы добавить язык к URL-адресу маршрута.

Теперь, без использования localize-router, everithing работает нормально, и я могу изменить язык (с помощью выпадающего меню) и увидеть примененные переводы текста.

После установки 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?

Я предполагаю, что проблема может быть в моей конфигурации маршрута, если я печатаю toString объекта ActivatedRouteSnapshot (независимо от текущей страницы), я всегда получаю

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

Answer 1

Попробуйте придерживаться рабочего примера и документации localize-router хранилища. Уменьшите вашу changeLanguage() функцию до:

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

Документация

changeLanguage(lang: string, extras?: NavigationExtras, useNavigateMethod?: boolean): переводит текущий URL на данный язык и меняет язык приложения. дополнительные будут переданы в Методы навигации углового маршрутизатора. userNavigateMethod говорит localize-router использовать метод навигации вместо метода navigateByUrl. За немецкий язык и маршрут определены как: lang / users /: user_name / profile

Источник

Answer 2

Как я и думал, проблема в конфигурации маршрутов, фактически я создал 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]
            },

Поскольку в localized-route используется цикл ActivatedRouteSnapshot для дочерних элементов маршрута.

В предыдущих конфигурациях маршрутов дочерние элементы DefaultLayoutComponents кажутся пустыми.

Answer 3

Изменить topbar.component.js на это:

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

Это переведет данный маршрут вместо перенаправления в корень документа /. И this.router.url возвращает текущий путь, где сейчас находится ваш пользователь.

Наконец, не забудьте добавить router в качестве зависимости к вашему компоненту верхней панели.