Angular routing with idle parameter

I installed new SPA templates for .NET Core and created a new Angular project. Here is the link link if you are interested in this. It comes with an example of routing. Now I'm trying to get routing to work with a parameter, but it's hard for me to get it working.

In app.module.ts, I define the path as follows (with a parameter):

{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'fetch-data:id', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }

And this is how I define the router link:

<a [routerLink]="['/fetch-data',3]">
    <span class='glyphicon glyphicon-th-list'></span> Fetch data by ID
</a>

The path displays correctly when I hover over a link, but when I click on it, it brings me home. I thought that maybe this contradicts the path above it, so I deleted the following line, but it still doesn't work:

{ path: 'fetch-data', component: FetchDataComponent },
+4
1

{ path: 'fetch-data:id', component: FetchDataComponent },

To

{ path: 'fetch-data/:id', component: FetchDataComponent },
+3

Source: https://habr.com/ru/post/1675776/


All Articles