Получить параметр url в целевом компоненте в Angular

Question

Моя цель - получить доступ к моему параметру в целевом компоненте.

У меня есть один компонент, доступный по пути / usersManagment, который является сводкой всех моих пользователей. У меня есть один компонент, доступный по пути / usersManagement /: id, который является моей страницей для информации пользователей. Работает отлично, страница меняется в зависимости от идентификатора. Затем я создал компонент edit-user для редактирования информации о пользователе. Я хотел бы получить доступ к этой странице через кнопку в моем однопользовательском компоненте (информационный компонент пользователя), и я хотел бы, чтобы путь был похож на / usersManagement /: id / edit-user. Я могу получить доступ к идентификатору в моем однопользовательском компоненте благодаря: let id = this.route.snapshot.paramMap.get('id');

Я делаю то же самое в компоненте edit-user, но я просто получаю неопределенное значение для моего параметра. Я не знаю, где моя ошибка, если она находится в моем файле модуля приложения, определяя путь к редактируемому пользовательскому компоненту или в моей кнопке с ссылкой на маршрутизатор или чем-то еще ...

Это код:

app.module.ts

const appRoutes: Routes = [
  { path: 'usersManagement',
      canActivate: [AuthGuard],
      component: UsersManagementComponent },
  { path: 'usersManagement/:id',
      canActivate: [AuthGuard],
      component: SingleUserComponent },
  { path: 'usersManagement/:id/edit-user',
      canActivate: [AuthGuard],
      component: EditUserComponent },
  { path: 'usersManagement/new-user',
      canActivate: [AuthGuard],
      component: NewUserComponent },
  { path: 'not-found',
      component: FourOhFourComponent },
  { path: '**',
      redirectTo: 'not-found' }
];

одного user.component.html

<a [routerLink]="['/usersManagement', id, 'edit-user']"><button class="btn btn-warning">Edit user</button></a>

редактировать-user.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { ActivatedRoute } from '@angular/router';

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

  lastName = 'lastName';
  public id;

  constructor(private userService: UserService,
              private route: ActivatedRoute) { }

  ngOnInit() {
    let id = this.route.snapshot.paramMap.get('id');
  }
}

usersManagement.component.html

<a [routerLink]="[id]"><button class="btn btn-info">Detail</button></a>

Single-user.component.ts * * 1 022

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { ActivatedRoute } from '@angular/router';

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

  public id;

  constructor(private userService: UserService,
              private route: ActivatedRoute) { }

  ngOnInit() {
    let id = this.route.snapshot.paramMap.get('id');
  }
}