从组件中的URL获取查询参数

Question

我试图了解如何将URl的Query参数输入到我的组件中。下面是我尝试过的方法，我在app-routing.module.ts中设置了路线，例如

  {
      path: 'ProjectShipment/userId/231',
      component: ProjectShipmentComponent,
      data: { title: 'Project Shipment' },
  }

在project-shipment.component.ts中，我尝试着

import {Router, ActivatedRoute, Params} from '@angular/router';
export class ProjectShipmentComponent implements OnInit {

  constructor( private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    debugger;
    this.activatedRoute.queryParams.subscribe(params => {
      const userId = params['userId'];
      console.log(userId);
    });}}

调试时，我在日志中未定义

我在这里想念什么

Answer 1

您需要将路线更改为

{
      path: 'ProjectShipment/:userId',
      component: ProjectShipmentComponent,
      data: { title: 'Project Shipment' },
  }

然后在您的组件中像yourhost/projectshipment/231一样调用

 this.activatedRoute.params.subscribe(params => {
      const userId = params['userId'];
      console.log(userId);
    })

要获取queryparams，您的代码是正确的，但您的路线应该

{
      path: 'ProjectShipment',
      component: ProjectShipmentComponent,
      data: { title: 'Project Shipment' },
  }

且网址应为yourhost/projectshipment?userid=231