Angular: Маршрутизация с идентификатором не работает

Question

Я кодирую свой первый MEAN-стек и получил кнопку, которая должна перейти по ссылке с идентификатором в ней:

<a [routerLink]="['/bewerkProduct/', product._id]" *ngIf="username === product.createdBy"><button type="button" name="button" class="btn btn-sm btn-info">Bewerken</button></a>

Вот мой модуль маршрутизации:

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent} from './components/dashboard/dashboard.component';
import { RegisterComponent } from './components/register/register.component';
import { LoginComponent } from './components/login/login.component';
import { ProfileComponent } from './components/profile/profile.component';
import { AuthGuard } from './guards/auth.guard';
import { NotAuthGuard } from './guards/notAuth.guard';
import { ProductComponent } from './components/product/product.component';
import { EditProductComponent } from './components/product/edit-product/edit-product.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  {path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard]},
  {path: 'registreren', component: RegisterComponent, canActivate: [NotAuthGuard]},
  {path: 'login', component: LoginComponent, canActivate: [NotAuthGuard]},
  {path: 'profiel', component: ProfileComponent, canActivate: [AuthGuard]},
  {path: 'producten', component: ProductComponent, canActivate: [AuthGuard]},
  {path: 'bewerkProduct/:id', component: EditProductComponent, canActivate: [AuthGuard]},
  { path: '**', component: HomeComponent}
];

@NgModule({
    declarations: [],
    imports: [RouterModule.forRoot(appRoutes)],
    providers: [],
    bootstrap: [],
    exports: [RouterModule]
  })

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

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

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

  constructor() { }

  ngOnInit() {
  }

}

редактирование-product.component.html

<p>
  edit-product works!
</p>

Когда я нажимаю кнопку, она направляется к / bewerkProduct / 5af158ae6cf6a701e0eb5bb0, но не открывает html-файл EditProductcomponent. Вместо этого он идет к стандартному компоненту HomeComponent. Любые предложения о том, что я делаю здесь не так?

Answer 1

В вашем конструкторе EditProductComponent или методе ngOnInit подпишитесь на параметры маршрута.

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

constructor(private route: ActivatedRoute) {

}

ngOnInit() {
  this.route.params.subscribe((params) => {
    const id: string =  params.id;
  });
}

Надеюсь, это поможет.