如何从 navigateByUrl 获取参数？

Question

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
      }

Answer 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.

Answer 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

Answer 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 { }

Answer 4

Try this:

 ngOnInit() {
    this.route.paramMap.subscribe(params => {
      console.log(params.get('orgstructure'));
    });
}

Answer 5

You have to get the params by its name params.get("orgstructure")

Answer 6

Suppose:

const url = '/some-url';

In some scenarios, this will work:

window.location.href = url;

instead of

this.router.navigateByUrl(url);

This is due to the way routing is designed in angular.