0

Routing rules are:

const routes: Routes = [{
    path: "",
    component: SkeletonComponent,
    children: [{
      path: "dictionary",
      component: DictionaryComponent,
      children: [
        {
          path: ":dict/:code",
          component: VersionsComponent
        }]
}];

URL looks like:

http://localhost:4200/dictionary/Gender/5

Where Gender is parameter: :dict and 5 is parameter :code.

I tried to get parameters inside component VersionsComponent:

ngOnInit() {
    console.log(this.activateRoute.snapshot.params['dict']);
    console.log(this.activateRoute.snapshot.params['code']);
}

I always get undefined

Improve this question
9
  • Can you try accessing it using this.activateRoute.snapshot.paramMap.get('dict');? Commented Aug 27, 2019 at 17:22
  • It gives me null Commented Aug 27, 2019 at 17:24
  • Empty object: ParamsAsMap {params: {…}} Commented Aug 27, 2019 at 17:30
  • 2
    Post a complete minimal example reproducing the issue, as a stackblitz. Commented Aug 27, 2019 at 17:37
  • 1
    What you have posted is far from being a complete example. Post a complete minimal example reproducing the issue, as a stackblitz. Commented Aug 27, 2019 at 17:40

4 Answers 4

Reset to default
4

The most effective way (works in all scenarios) is to subscribe to Activated Route. It'll work even when you don't switch between components, and only change the parametarised portions of the URL.

this.activatedRoute.params.subscribe(
  (params: Params) => {

    console.log(params.dict)

  }
)

If you don't subscribe to params, the code will only work when the component is loaded initially. After that, you need to leave the component for it to work again. By subscribing, you can load multiple resources without ever leaving the component.

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

5 Comments

Type of params should probably be ParamMap and should probably be this.activatedRoute.paramMap angular.io/guide/router#activated-route-in-action
Is it correct import? import { ActivatedRoute } from "@angular/router";
It gives me undefiuned: ` console.log(params.dict)`
And this gives empty object: console.log(params.)
I open page typing URL address, not using route link
0

As mentioned above go with paramMap. Please refer the stackblitz

  ngOnInit() {
    this.activatedRoute.paramMap.subscribe((data)=>{
      console.log(data.params)
    })
  }
Improve this answer

2 Comments

it is still does not work for me, you have route differ
@Jony Can you please make a stackblitz project of the same that I can refer
0

i think Your Routes configuration is wrong, should be like that:

const routes: Routes = [
  {
    path: '',
    component: SkeletonComponent
  },
  {
    path: "dictionary",
    component: DictionaryComponent,
    children: [{
      path: ":dict/:code",
      component: VersionsComponent
    }]
  }
];

and make sure on DictionaryComponent your using <router-outlet>

Improve this answer

Comments

0

The other answers that use 'subscribe' method are partially correct, but the reason you're still getting an error is that they're missing the 'get()' part, as per the Angular documentation:

https://angular.io/api/router/ParamMap

Try this:

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

    myVar

    ngOnInit(): void { 
     this._Activatedroute.paramMap.subscribe((data) => { 
          this.myVar = data.get('NameOfVariable')  // Put the name of whatever variable you're trying to get here
        }) 
        console.log(this.myVar)
     }

And it seems you've already received help on how to pass the data from the parent, but just to round off the answer, this is how I usually do it:

 <button [routerLink]="['/myLink',dataVar]"> Click Here </button>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.