Angular 使用activatedRoute的角度参数对象null

Angular 使用activatedRoute的角度参数对象null,angular,typescript,router,Angular,Typescript,Router,我在尝试获取:id参数时遇到问题 这是我的路线: { path: 'user', component: UserComponent, children: [ { path: ':id', component: UserComponent } ] }, 这是我的组成部分: import { Component, OnInit } from '@angular/core'; import { Activated

我在尝试获取:id参数时遇到问题

这是我的路线:

{
    path: 'user',
    component: UserComponent,
    children: [
      {
        path: ':id',
        component: UserComponent
      }
    ]
},
这是我的组成部分:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.getUser();
  }

  getUser() {
    this.route.params.subscribe(params => {
      console.log(params); // displays empty object
    });
  }

}
我搞参数是不是做错了

谢谢大家!


PS欢迎对我的代码提出任何批评或建议

您正在加载与Child相同的组件,这有点像wiered

因此,您的代码应该如下所示

{
    path: 'user/:id',
    component: UserComponent
}

{
    path: 'users', 
    component: UserComponent, // For showing list of users
    children: [
      {
        path: ':id', 
        component: UserDetailComponent // For Showing detail of specific user
      }
    ]
},

您正在加载与Child相同的组件,这有点像wiered

因此,您的代码应该如下所示

{
    path: 'user/:id',
    component: UserComponent
}

{
    path: 'users', 
    component: UserComponent, // For showing list of users
    children: [
      {
        path: ':id', 
        component: UserDetailComponent // For Showing detail of specific user
      }
    ]
},

非常感谢。那么,在上面两种方法之间显示用户详细信息的最佳方式是什么呢?另外,如果我使用您提供的第一种解决方案,我不能使用没有Id参数的路由
/user
。我更喜欢第二种,这将使url和组件之间有一个清晰的分离,谢谢。那么,在以上两种方法之间显示用户详细信息的最佳方式是什么呢?另外,如果我使用您提供的第一种解决方案,我不能使用没有Id参数的路由
/user
,我更喜欢第二种,这将明确区分url和组件。您导航到的url是什么样子的?它是这样的:
localhost:4200/user/3
您导航到的url是什么样子的?它是这样的:
localhost:4200/user/3