当使用路由器链接路由时，正确地创建了URL，但没有重定向到组件并显示数据？

Question

我在Angular 7应用程序上工作，当路由到组件报告详情时，我面临着问题。

使用路由器链接只能在浏览器上创建URL链接，而不能重定向到其他地方。

组件报告的详细信息，直到我点击输入。

只有当我使用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

我看到queryparams被添加到提供的链接中。href 和 routerLink 但在路由模块中 id 增加了一个url param。它与 href 因为它会重新加载组件。

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

对于带有url参数的路由，你必须订阅到 params 从 ActivatedRoute或通过查询参数订阅路由 queryParams

请找一个路由演示 此处 在堆栈闪电战中