Angular 根据路由参数加载组件

Question

我想在用户单击主页组件中的 link 时加载基于 URL 参数的组件。例如，用户位于“/home”，其中包含 links

的列表

Link 1 Link2

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

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

我在路由模块中尝试了以下操作，url 发生了变化，但详细信息组件未加载，控制台中也未报告任何错误。

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

锚标签是：

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

Answer 1

尝试<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

Answer 2

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

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>

Angular 根据路由参数加载组件

Angular loading component based on route parameter

javascript

angular

angular2-routing