使用路由器链接进行路由时，它会正确创建 URL，但不会重定向到组件并显示数据？

Question

我在 Angular 7 应用程序上工作，当路由到组件报告详细信息时遇到问题

使用路由器链接它只会在浏览器上创建 URL 链接，但不会重定向到

在我点击 Enter 之前的组件报告详细信息。

只有在我使用 href 时才能正确路由。

如果我使用 href 或路由器链接，两者都生成相同的 URL 链接

http://localhost:4200/reportdetails?id=2028

如果我使用路由器链接，我将路由器链接写为：

<a [routerLink]="['/reportdetails']" [queryParams]="{id: subrep.reportID}" >

当使用 href 我写如下：

<a href="/reportdetails?id={{subrep.reportID}}">

approutingmodule.ts：

const routes: Routes = [
  {path:'',redirectTo: 'ReportCategoryComponent', pathMatch: 'full'},
  {path:'report',component:ReportCategoryComponent},
  {path:'reportdetails',component:ReportdetailsComponent},
  {path:'reportdetails/:id',component:ReportdetailsComponent}
];

那么路由器链接重定向问题如何解决？

Answer 1

我看到在href 和routerLink 提供的链接中添加了queryparams，但在路由模块id 中添加了一个url 参数。它在重新加载组件时与 href 一起使用。

根据路由模块中提供的路由，特定 id 的 url 应该是http://localhost:4200/reportdetails/2028

要使用 url 参数进行路由，您必须从 ActivatedRoute 订阅 params 或使用查询参数路由订阅queryParams

请在 stackblitz 中找到路由演示 here