Angular 6 Route URL String Parameter in AppComponent

Question

I want to have all my routes start with a language parameter like so:

/en/home
/fr/home

My router-outlet is located in my AppComponent. Now the AppComponent sets my html template for the entire app and it also has language switching buttons.

Currently I have the following routes:

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

If I try to access them in my AppComponent the value is null. If I do the exact same code in Home the value is found and works. But I need the params in the AppComponent so that doesn't help me.

Right now I only have 1 example in the routes but I will have many routes in the application, and ALL of them should start with the lang parameter.

I tried researching but I can't seem to find any help. All examples I tried don't work when put in the AppComponent.

EDIT: Here is snippit of my 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);
  }

JohnnyDevNull · Accepted Answer · 2018-09-07 21:06:51Z

2

change it to something like this:

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

then you should have access in all childs by fetching it in the ngOnInit from the AppComponent to an service component.

answered Sep 7, 2018 at 21:06

JohnnyDevNull

9841 gold badge8 silver badges22 bronze badges

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

2 Comments

bouboule Over a year ago

Worked, I had to in this case create a new component between app component and my child components and used that as the component for :lang, but otherwise works good. thanks

JohnnyDevNull Over a year ago

it was a pleasure

Collectives™ on Stack Overflow

Angular 6 Route URL String Parameter in AppComponent

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related