How to get parameter from navigateByUrl?

angular angular8

15,066

Solution 1

You should declare your variables and then use it:

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

constructor(private route: ActivatedRoute) {
  this.route.paramMap.subscribe( params => {
    this.orgstructure = params.get('orgstructure');    
  });
}

UPDATE:

You should declare your parameters like that:

this.router.navigate(['/orgtree'], {queryParams: {orgstructure: 1}});

OR if you want to use navigateByUrl method:

const url = '/probarborrar?id=33';
this.router.navigateByUrl(url);

Please, see work demo at stackblitz.

Solution 2

constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       console.log(param);
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Try this code, make sure route is an instance of ActivatedRoute

Solution 3

Refer this link, I reproduced your scenario in Stackblitz

a.component.html

<button (click)="navTo()">nav to b</button>

a.component.ts

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

@Component({
  selector: 'app-a',
  templateUrl: './a.component.html',
  styleUrls: ['./a.component.css']
})
export class AComponent implements OnInit {

  constructor(    private router: Router
) { }

  ngOnInit() {
  }

  navTo() {
    let item = {
      url : `b/${Math.random()}`
    };
    this.router.navigateByUrl(item.url);
  }

}

b.component.html

<h1>Value in param : {{value}}</h1>

<button routerLink="/a">back to a</button>

b.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
@Component({
  selector: 'app-b',
  templateUrl: './b.component.html',
  styleUrls: ['./b.component.css']
})
export class BComponent implements OnInit {
  public value;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.value = this.route.snapshot.params.id; 
    console.log(this.route.snapshot.params.id);
  }

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';

const routes: Routes = [
  {
    path: '',
    component: AComponent
  },
  {
    path: 'a',
    component: AComponent
  },
  {
    path: 'b/:id',
    component: BComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

15,066

OPV

Updated on June 04, 2022

Comments

OPV almost 2 years
I do navigation using:
```
this.router.navigateByUrl(item.url);
```
Where item.url has value:
```
orgtree/1
```
Route is:
```
{
        path: "orgtree/:orgstructure",
        component: OrganizationsComponent
      }
```
Inside component I do:
```
 ngOnInit() {
    this.route.paramMap.subscribe(params => {
      console.log(params);

    });
}
```
Why I get empty params?

Also I have tried this:
```
this.router.navigate(['/orgtree', 1]);
```
NO EFFECT

I got problem:

Route should be:
```
{
        path: "orgtree",
        component: OrganizationsComponent
      }
```
- msanford over 4 years
  
  Please show your whole component. Is it decorated with implements OnInit for example? Missing some import? What is route, actually (is it an ActivatedRoute or Router or what?)
- OPV over 4 years
  
  all are present, I have checked
- msanford over 4 years
  
  What is this.route in your constructor()?
- OPV over 4 years
  
  this: private route: ActivatedRoute
- OPV over 4 years
  
  I debug route I see this: '/orgtree?orgstructure=OrgStructure1')
- OPV over 4 years
  
  reason: "Navigation ID 3 is not equal to the current navigation id 4"} id: 3 reason: "Navigation ID 3 is not equal to the current navigation id 4" url: "/orgtree?orgstructure=OrgStructure1" proto: RouterEvent
OPV over 4 years

Inside constructor or nginit?
StepUp over 4 years

@OPV you can declare in constructor or in ngOnInit.
OPV over 4 years

empty object it returns
OPV over 4 years

I have completed url like; /orgtree/1
StepUp over 4 years

@Opv Have you written code like that this.router.navigate(['/orgtree'], {queryParams: {orgstructure: 1}}); and params are not got? If yes, could you show your import statements and declaration of route variable?
OPV over 4 years

import { Router, ActivatedRoute } from "@angular/router";
StepUp over 4 years

@OPV please, see work demo
Nikhil Arora over 4 years

It would be easy to help if you share your code snippet on slackblitz
msanford over 4 years

Why queryParams? OP wants a path parameter and implements navigateByUrl(). Maybe they get the URI from a database or something as a premade string.
OPV over 4 years

I get this debug info: NavigationCancel {id: 3, url: "/orgtree?orgstructure=OrgStructure1", reason: "Navigation ID 3 is not equal to the current navigation id 4"} id: 3 reason: "Navigation ID 3 is not equal to the current navigation id 4" url: "/orgtree?orgstructure=OrgStructure1" __proto__: RouterEvent
StepUp over 4 years

@msanford OP said Also I have tried this: this.router.navigate(['/orgtree', 1]);. However, I've added stackblitz example where navigateByUrl is implemented
StepUp over 4 years

@OPV it is really hard to debug without your code. Could you create a stackblitz example?
StepUp over 4 years

@OPV maybe you are calling router.navigate twice?
Shadi Alnamrouti almost 3 years

I think it's empty because you are using params inside subscribe however you are logging param which does not exist.