Как получить параметр из navigateByUrl?

Question

Я делаю навигацию, используя:

this.router.navigateByUrl(item.url);

Где item.url имеет значение:

orgtree/1

Маршрут:

{
        path: "orgtree/:orgstructure",
        component: OrganizationsComponent
      }

Внутри компонента, который я делаю:

 ngOnInit() {
    this.route.paramMap.subscribe(params => {
      console.log(params);

    });
}

Почему я получаю пустые параметры?

Также я попробовал это:

this.router.navigate(['/orgtree', 1]);

НЕТ ЭФФЕКТА

У меня проблема:

Маршрут должен быть:

{
        path: "orgtree",
        component: OrganizationsComponent
      }

Answer 1

Ссылка по этой ссылке. Я воспроизвел ваш сценарий в 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 2

constructor(private route: ActivatedRoute) {}

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

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

Попробуйте этот код, убедитесь, что route является экземпляром ActivatedRoute

Answer 3

Вы должны объявить свои переменные и затем использовать их:

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

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

ОБНОВЛЕНИЕ:

Вы должны объявить свои параметры следующим образом:

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

ИЛИ, если выхотите использовать navigateByUrl метод:

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

Пожалуйста, ознакомьтесь с демонстрацией работы на stackblitz.

Answer 4

Вы должны получить параметры по имени params.get ("orgstructure")

Answer 5

Попробуйте это:

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