基于路由参数的角加载组件答案

【问题标题】：Angular loading component based on route parameter基于路由参数的角加载组件
【发布时间】：2022-01-03 21:33:59
【问题描述】：

当用户点击主组件中的链接时，我想根据 URL 参数加载组件。例如，用户位于“/home”，其中有一个链接列表

链接 1 链接2

当用户点击Link 1或2时，我想加载details组件，url应该是'/home/details/1'，最后的“1”是一个路由参数。

当用户点击链接 2 时会发生同样的情况，加载相同的详细信息组件但参数为“2”并且 url 更改为 '/home/details/2'

我在路由模块中尝试了以下，url改变了但是details组件没有加载，控制台也没有报错。

const routes: Routes = [
  {
     path:'',
     component:HomeComponent,
     children:[
      {
        path:':id',
        component:DetailsComponent
      }]
   }
]

并且锚标签是：

<a [routerLink]="[1]">Link 1</a>
<a [routerLink]="[2]">Link 2</a>

【问题讨论】：

你是如何调用 DetailsComponent 的？你也可以分享那个代码吗？
我正在调用详细组件，例如 Link 1

标签： javascript angular angular2-routing

【解决方案1】：

如果你想重定向到某些页面，你可以随时使用这个

In RouteModule
    const routes: Routes = [
      {
         path:'Home',
         component:HomeComponent,
         children:[
          {
            path:':id',
            component:DetailsComponent
          }]
       }
    ]

    In Html

    <a [routerLink] = ['/Home','1'] >Link 1</a>
     <a [routerLink] = ['/Home','2']>Link 2</a>

【讨论】：

我试过上面的例子，只是URL改变，DetailsComponent没有显示。

【解决方案2】：

试试<a [routerLink]="['/home',2]">Link 2</a> 和

const routes: Routes = [
  {
     path:'home',
     component:HomeComponent,
     children:[
      {
        path:':id',
        component:DetailsComponent
      }]
   }
]

您还应该使用以下命令生成页面：

ng g module detail --module person --route {personid}/detail

【讨论】：

我不能使用 'path:'home'，因为 home 位于 Angular 模块中