如何从 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

试试这个：

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

Answer 2

你必须通过名称获取参数 params.get("orgstructure")

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);

Please, see work demo at stackblitz.

Answer 4

constructor(private route: ActivatedRoute) {}

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

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

试试这个代码，确保 route 是 ActivatedRoute

的一个实例

Answer 5

参考 this link，我在 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);
  }

}

应用-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 6

假设：

const url = '/some-url';

在某些情况下，这会起作用：

window.location.href = url;

而不是

this.router.navigateByUrl(url);

这是由于 angular 中的路由设计方式所致。

如何从 navigateByUrl 获取参数？

How to get parameter from navigateByUrl?

angular

angular8