使用Angular2从url中提取id

Question

嗨,我试图使用Angular2提取网址的id部分.

http://localhost:3000/item/187809

我一直在onInit中玩ActiveRoute,但没有运气

 this.route.queryParams.forEach((params: any) => {
   console.log("QUERYPARAMS");
   console.log(params);
 });

也尝试订阅像这样的路线更改

this.routeSub = this.route.queryParams.subscribe(params => {
   console.log(params);
   console.log(+params['id']);
}); 

但是params只是一个空物.

我将路线定义为这样的懒惰路线

{
path: item',
children: [
  { path: ':id', loadChildren: './item/item.module#ItemModule' },
]
},

我认为问题是我有一个标题组件和一个主要组件,它保存了延迟加载的路由子节点.我正在尝试在头部组件中加载id.

知道缺少什么吗？

Answer 1

1)确保您已配置了一个期望id作为参数的路由,如下所示:

  {path: 'item/:id', component: SomeItemComponent}

2)您需要导入ActivatedRoute(而不是ActiveRoute)并将其注入组件构造函数中:

  private routeSub: Subscription;
  constructor(private route: ActivatedRoute) { }

3)在同一组件中的ngOnInit中,您可以params通过订阅来访问observable中的数据,如下所示:

  ngOnInit() {
    this.routeSub = this.route.params.subscribe(params => {
      console.log(params) //log the entire params object
      console.log(params['id']) //log the value of id
    });
  }

Answer 2

我知道我的回复有点迟了,但万一你还有问题请看看Angular文档.

角度路由教程

查看链接中的示例.

首先导入ActivatedRoute:

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

然后将其注入构造函数中

constructor(private route: ActivatedRoute) {}

在OnInit()

ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
}

并且像这样你不需要直接担心任何Observable.

希望这对你有所帮助.

Answer 3

你有多重选择，以获得id

constructor(private route: ActivatedRoute) { }

1-借助 params

const id= this.route.snapshot.params['id'];

或者

const id = this.route.snapshot.params.id // any param name after "params"

2-借助 paramMap

const id= this.route.snapshot.paramMap.get('id')

3-subscribe到params（不要忘记退订）

  private subscription: Subscription

  constructor(private route: ActivatedRoute) { }
  ngOnInit(): void {
    this.subscription = this.route.params.subscribe(params => {
      const id = params['id']
    })
  }

 //To prevent memory leak
  ngOnDestroy(): void {
    if (this.subscription)
      this.subscription.unsubscribe()
  }

更新

想象一下，您有以下路线：

{
  path: "",
  component: LayoutComponent,
  children: [
    {
      path: "action/:id", component: ChildComponent
    }
  ]
}

如果您在 LayoutComponent 中并且想要获取 ChildComponent 的参数，则必须使用以下方式：

this.route.children.forEach(child => {
  child.params.subscribe(params => {
      const id = params['id']
  })
}

Answer 4

我怀疑问题是你正在使用queryParams而不仅仅是params.

params:一个Observable,包含特定于路由的必需参数和可选参数.

queryParams:包含可用于所有路由的查询参数的Observable .

试试这个:

this.route.params.subscribe(params => {
   console.log(params);
   console.log(+params['id']);
});