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

Question

我在开发 angular 7 个应用程序我在路由到组件报告详细信息时遇到问题

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

组件报告详细信息，直到我单击 Enter。

它只有在我使用 href 时才能正常工作。

如果我使用 href 或路由器 link 两个都生成相同的 URL link

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

如果我使用路由器 Link 我将路由器 link 写成 :

<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}
];

so 如何解决路由器 link 重定向问题？

Answer 1

我看到在 href 和 routerLink 提供的 link 中添加了查询参数，但在路由模块 id 中添加了一个 url 参数.它在重新加载组件时与 href 一起工作。

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

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

请在 stackblitz

中查找路由演示 here

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

When routing using router Link it creates the URL correctly but does not redirect to component and displays data?

typescript

angular-routing

angular-ui-router

angular-components

angular7