Angular 带参数的路由不起作用

Question

我已经为 .NET Core 安装了新的 SPA 模板，并创建了一个新的 Angular 项目。这里是 a link 如果你有兴趣试一试。它带有一个路由示例。现在我正在尝试让路由与参数一起工作，但我很难让它工作。

在app.module.ts中，我定义路径如下（带参数）：

{ 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' }

这就是我定义路由器的方式 link:

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

当我将鼠标悬停在 link 上时，路径显示正确，但当我单击它时，它会将我带回主页。我认为它可能与它上面的路径冲突所以我删除了以下行，但它仍然不起作用：

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

Answer 1

改变

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

到

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

Angular 带参数的路由不起作用

Angular routing with parameter not working

url-routing

single-page-application

angular