Translate my Url Angular 2 - Typescript

Question

Angular2 - TypeScript - ng-Translate

Hello people,

I need to change the rest of my url depending on language selected "en/soybean", "fr/soya". In my app.routes I got this path :

{ path: ':lang/soybean', component: SoybeanComponent }

My SoyBean component is translate from the lang param with ng-translate

this.route.params.subscribe(params => {
   translate.use(params['lang']);
})

How can I display the url as fr/soya but still use path fr/soybean !?

What I tried

*I create a new path: { path: ':lang/soya', component: SoybeanComponent }, I thought I could redirect the user to the good path :

 if(params['lang'] === 'en'){
       this.router.navigateByUrl('lang/soybean');
    }
    if(params['lang'] === 'fr'){
       this.router.navigateByUrl('lang/soya');
    }

but it will result on a infinite loading.
Then I thought I could hardcode the lang param after redirecting like :

if(params['lang'] === 'en'){
       this.router.navigateByUrl('en/soybean');
    }
    if(params['lang'] === 'fr'){
       this.router.navigateByUrl('fr/soya');
    }

but in this case I will catch an exception.*

It looks like you are treating lang as both a route parameter and as a constant path route? — DeborahK
– DeborahK, Commented Jul 15, 2017 at 1:14
lang determine witch language I will use, but it didn't change the path. If lang is fr then soybean.html and soybean.component will be translate to french. What I want is how can I display the url as fr/soya but still use path fr/soybean ! Sorry for bad explanation I will edit my first post ! — SilverShroud
– SilverShroud, Commented Jul 17, 2017 at 14:09

JGFMK · Accepted Answer · 2017-07-15 11:44:24Z

1

You are overcomplicating it :-). Just used template strings with backticks

url = `${lang}/${i18name}`

answered Jul 15, 2017 at 11:44

JGFMK

8,9824 gold badges65 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SilverShroud Over a year ago

Is this angular 2 ? And could you precise where and how you use it ! Cause I define my url in the app.routes.ts like that { path: ':lang/soybean', component: SoybeanComponent } ? thx !

JGFMK Over a year ago

Well it's baked into Typescript that's the foundation Angular 2 & 4 are based upon. basarat.gitbooks.io/typescript/content/docs/…

SilverShroud · Accepted Answer · 2017-07-17 19:20:16Z

0

I found my own solution with location.replace(newUrl)

I create a new path : { path: ':lang/soya', component: SoybeanComponent }

and in my component I use location.replace(url)

 this.route.params.subscribe(params => {
            translate.use(params['lang']);
            switch (params['lang']) {
                case 'en':
                    location.replace(`index.html#/${params['lang']}/soybean`)
                        break;
                case 'fr':
                    location.replace(`index.html#/${params['lang']}/soya`);
                        break;
            }

        })

This works for me ! If you know a better solution i'll be glad to hear it ! Thx !

answered Jul 17, 2017 at 19:20

SilverShroud

568 bronze badges

Collectives™ on Stack Overflow

Translate my Url Angular 2 - Typescript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related