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

Posted 2023-03-13

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

【英文标题】：When routing using router Link it creates the URL correctly but does not redirect to component and displays data?

【发布时间】：2020-09-09 23:20:04

【问题描述】：

我在 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
];

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

【问题讨论】：

你能重现它吗？例如stackblitz.com/edit/…

假设我创建了新组件，我需要在 stackbliz 上保存我所做的保存

好的，我做我的 stackbliz 并保存在链接上

stackblitz.com/edit/…

【参考方案1】：

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

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

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

请在 stackblitz 中找到路由演示 here

【讨论】：

你能告诉我如何从激活路由订阅参数

在 stackblitz 中添加演示