CODEWITHSUNDEEP
angularangular2-routingtranslateangular-translatengx-translate
Şahin Taşın
Şahin Taşın

Reputation: 123

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.

Upvotes: 1

Views: 1125

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222682

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

Upvotes: 2

Related Questions