He definido mi ruta de la siguiente manera:

 { path: 'productDetails/:id', component: ProductDetailsComponent }

En mi opinión, tengo un área para cargar mi componente productDetails cuando se hace clic en un enlace:

 <li *ngFor="let product of category.Products"> <a [routerLink]="['/productDetails', product.ProductId]">{{product.Name}}</a> </li>

Obtengo un comportamiento extraño en el que solo la primera vez que hago clic en cualquiera de los enlaces se carga el componente. No importa qué enlace siempre y cuando sea la primera vez. Cualquiera de los enlaces funciona, pero después de la primera vez, ninguno de ellos vuelve a funcionar. Así que solo hago que mi componente productDetails se cargue una vez y luego se detiene el enrutamiento. Los enlaces muestran la ruta de ruta correcta al pasar el mouse.