Search code examples
angularangular2-routingtranslateangular-translatengx-translate

Angular 2 Route Translation


I have a web app that support multiple languages. I am successfully translating the content of the app with @ngx-translate. However; I also need to translate the route link. My link look like this

www.somewebsite.com/dashboard.

Now when I change the language to something like Turkish; I need the link look like

www.somewebsite.com/anasayfa.

How can I achieve that easily? Any help is appreciated. Thanks in advance.


Solution

  • This is sort of bad idea to implement, since you need to build several routes for each language. Generally i would recommend you to configure routes with languages. For example,

    www.somewebsite.com/en/dashboard

    and if its a differencet language then it should be,

    www.somewebsite.com/es/dashboard.

    However if you really want to build with different language routes then you have to do,

    create a new path : { path: ':lang/dashboard', component: dashboardComponent }
    
    this.route.params.subscribe(params => {
                translate.use(params['lang']);
                switch (params['lang']) {
                    case 'en':
                        location.replace(<code>index.html#/${params['lang']}/dashboard</code>)
                            break;
                    case 'fr':
                        location.replace(<code>index.html#/${params['lang']}/anasayfa</code>);
                            break;
                }
    
      })
    

    also you can have different routes if you dont like the above implementation