Changing language brings you back to the home page about localize-router HOT 3 CLOSED

Hi @brada1703 ,

in the first code example you have both routerLink and (click). Most likely your route gets translated with changeLang but then navigation via routerLink kicks in and redirects you to home.
Try to remove all routerLink bits and leave just click:

<a (click)="changeLang('en')">English</a>
<a (click)="changeLang('it')">Italiano</a>

If you need to mark active language button you can use ngx-translate's TranslateService or localize-router LocalizeService's parser to get current language and simply use ngClass to mark it.

from localize-router.

Thanks again @meeroslav You're the best! 👍

You're absolutely right. The routerLink was the problem. It kept bringing me back to the homepage. Once I removed it, I realized that the problem then was the "changeLang" part.

In case anyone else is having a problem with this, let me show you what I changed.

I realized that I was importing
import { TranslateService } from '@ngx-translate/core';
instead of
import { LocalizeRouterService } from 'localize-router';

The problem here is that with @ngx-translate/core, they want to see

changeLang(lang:string){
this.translate.use(lang);

but in localize-router, your syntax is slightly different

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

So, I had to change the imports to 'localize-router', the constructor to

  constructor(private localize: LocalizeRouterService) {}

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

and finally change the on click event to
(click)="changeLanguage('it')"

Now it works like a charm! 👍

from localize-router.

I used (click)="changeLanguage('en')" and the strings are translated but the url does not update accordingly.

I am also getting Uncaught (in promise): TypeError: Cannot read property 'component' of null when I change to another language.

Did anyone else have this problem? Please help.

from localize-router.