4

I've installed the new SPA templates for .NET Core, and created a new Angular project. Here is a link if you're interested to give it a go. It comes with an example of routing. Now I am trying to get routing to work with a parameter, but I am having difficulty getting it to work.

In app.module.ts, I am defining 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 am defining the router link:

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

The path shows correct when I hover over the link, but when I click on it, it takes me back to home. I thought maybe it is conflicting with the path above it so I deleted the following line, but still it doesn't work:

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

1 Answer 1

5

Change

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

To

{ path: 'fetch-data/:id', component: FetchDataComponent },
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.