Получение префикса языка в качестве параметра от Angular 6 router - PullRequest
Новая
       11

Получение префикса языка в качестве параметра от Angular 6 router

0 голосов
/ 16 сентября 2018

У меня есть приложение Angular (6.0.3), и я хочу использовать язык в качестве общего префикса для всех маршрутов, что-то вроде /en/foo/bar. Мое определение маршрута src/app/submodule/submodule.routes.ts выглядит так: 

export const submoduleRoutes = [
    { path: ':lingua/foo/bar', component: FooBarComponent },
];

Мой корневой компонент src/app/app.component.ts: 

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute, Event, NavigationEnd } from '@angular/router';

import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit, OnDestroy {
  title = 'app';
  private sub: any;


  constructor(private router: Router, private route: ActivatedRoute) {

    this.router.events.pipe(
      filter((event:Event) => event instanceof NavigationEnd)
    ).subscribe(x => console.log(x));
  };

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       console.log(params);
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Когда я перехожу на /xy/foo/bar, FooBarComponent обрабатывается. Но я не могу получить префикс языка в корневом компоненте. Хэш params пуст.

Выход консоли сначала отображает {} для пустых параметров, а затем событие NavigationEnd.

Тот же код работает, как и ожидалось в FooBarComponent. Очевидно, что корневой компонент - это неправильное место для получения параметров.

Моя цель - получить параметр lingua для всех компонентов, чтобы я мог установить правильный язык. Я знаю, что я мог бы также сохранить язык в cookie или локальном хранилище, но мне нужны закладки для URL для многоязычного контента.

В случае, если это имеет значение, исходный код имеет значение https://github.com/gflohr/Lingua-Poly (commit 12608dc). Рассматриваемый маршрут определен в https://github.com/gflohr/Lingua-Poly/blob/master/src/app/main/main.routes.ts (в конце :lingua/mytest.

1 Ответ

0 голосов
/ 16 сентября 2018

Вам нужно сделать их потомками App.component, чтобы он работал.

Например: 

const routes = [
  { path: ":lingua", component: AppComponent, loadChildren: 'app/main/main.module#MainModule' },
  { path: "", pathMatch: "full", redirectTo: "/en" }
]

Это загрузит все дочерние маршруты из основного модуля, но позволитAppComponent для доступа к параметру lingua.

Затем вам нужно будет удалить часть :lingua из вашего дочернего маршрута

Вот пример StackBlitz

...