Angular 6 Route URL String Параметр в AppComponent - PullRequest
Новая
       33

Angular 6 Route URL String Параметр в AppComponent

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

Я хочу, чтобы все мои маршруты начинались с параметра языка, например: 

/en/home
/fr/home

Мой маршрутизатор находится в моем AppComponent. Теперь AppComponent устанавливает мой HTML-шаблон для всего приложения, а также имеет кнопки переключения языка.

В настоящее время у меня есть следующие маршруты: 

 const routes: Routes = [
  { path: ':lang/home', component: HomeComponent },
  { path: '',  redirectTo: 'en/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

Если я пытаюсь получить к ним доступ в моем AppComponent, значение равно нулю. Если я делаю точно такой же код в Home, значение найдено и работает. Но мне нужны параметры в AppComponent, чтобы они мне не помогли.

Прямо сейчас у меня есть только 1 пример в маршрутах, но у меня будет много маршрутов в приложении, и ВСЕ из них должны начинаться с параметра lang.

Я пытался исследовать, но не могу найти какую-либо помощь. Все примеры, которые я пробовал, не работают, если их поместить в AppComponent.

EDIT: Вот фрагмент моего AppComponent 

constructor(private translate: TranslateService, private route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    this.translate.setDefaultLang('en');

    this.route.paramMap.subscribe(params => {
      const lang = params.get('lang');
      console.log(lang);
      if (lang != null && (lang === 'fr' || lang === 'en')) {
        this.switchLanguage(lang);
      }
    });
  }

  switchLanguage(language: string) {
    this.translate.use(language);
    if (language === 'en') {
      this.isEnglish = true;
    } else {
      this.isEnglish = false;
    }
    console.log('switching to: ' + language);
  }

1 Ответ

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

изменить на что-то вроде этого: 

{ path: ':lang', component: AppComponent, children: [
   { path: 'home', component: HomeComponent },
]},
{ path: '',  redirectTo: 'en/home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }

тогда вы должны иметь доступ ко всем дочерним элементам, извлекая его в ngOnInit из AppComponent в компонент службы.

...