Getting parent route parameters in Angular 2 (router v3.0.0-alpha.6)

Question

Looking to set up a site using one of Google's recommended practices for multi-regional and multilingual websites, particularly the model of utilizing subdirectories with gTLD's (ex. www.stackoverflow.com/en/questions/ask, www.stackoverflow.com/fr/questions/ask, etc).

Depending on the top-level subdirectory I'd like to set default language and fetch the appropriate JSON data. To futher explain, when a user navigates directly to www.mywebsite.com/en/home the default language will be set to en and my content service will fetch the en.json file.

In the example above my routes would be configured like so:

export const routes: RouterConfig = [
  { path: ':country',          component: Home },
  { path: ':country/home',     component: Home },
  { path: ':country/about',    component: About },
  { path: ':country/contact',  component: Contact }
];

I'm trying to figure out how to grab the :country route parameter (if URL is www.mywebsite.com/en/about/ I'm trying to get the :country route parameter value of en) when in the Home, About, or Contact component. Here's a couple of things I've tried:

export class Home implements OnInit {
    constructor(
        private route: ActivatedRoute
    ) {}

    private sub: any;

    ngOnInit(){
       this.sub = this.route.params.subscribe(params => {
         let country = params['country'];
         console.log(country) // undefined :(
       });
    }
}

I've also tried using route.snapshot like so:

export class Home implements OnInit {
    constructor(
        private route: ActivatedRoute
    ) {}

    ngOnInit(){
        let country = this.route.snapshot.params['country'];
        console.log(country) // undefined :(
    }
}

Also have tried working with this solution to no avail: Angular 2 access parent routeparams from child component

If anyone has an idea of another approach please share!

You've mentioned 'parent route parameters' in your question title. Are these the only routes that you have defined in your app or are they children in another `RouterConfig` — Ian Belcher, Jul 04 '16 at 05:46

Borys Serebrov · Answer 1 · 2016-06-27T20:42:29.813

I am not sure why this didn't work for you, but I just tried and the following code works for me:

import {Component, OnInit}              from '@angular/core';
import { Router, ActivatedRoute }       from '@angular/router';

@Component({
  selector: 'home',
  template: '<h1>Home: {{country}}</h1>'
})

export class HomeComponent implements OnInit {

  country: string;

  constructor(
    private route: ActivatedRoute,
    private router: Router) {

    this.country = '?';

  }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       let country = params['country'];
       this.country = country;
       console.log(country);
     });
  }


}

When I navigate to the root page, it displays Home:, the /en page displays Home: en and the /fr page - Home:fr. It works similarly for the "about" page.

The full source is here. Update: here is also live demo (plunker).

Resources:

I have the same issue but in Angular 2 Final version. Pls help — SudarP, Sep 16 '16 at 04:28

Getting parent route parameters in Angular 2 (router v3.0.0-alpha.6)

1 Answers1