获取儿童的路线参数

时间:2019-04-26 22:35:47

标签: angular routing

我正在尝试从孩子那里访问参数,但似乎无法访问它们。我的路线安排如下:

const clientsRoutes: Routes = [
  {
    path: 'clients',
    component: ClientIndexPage,
    // loadChildren: "./client-index/client-index.module#ClientIndexPageModule",
    canActivate: [AuthGuard],
  },
  { path: 'clients/:id',
    component: ClientDetailPage,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'profile',
        component: ProfilePage
        // loadChildren: './client-detail/profile/profile.module#ProfilePageModule',
      },
      {
        path: 'finance',
        component: FinancePage
        // loadChildren: './client-detail/finance/finance.module#FinancePageModule'
      },
      {
        path: '',
        redirectTo: 'profile',
        pathMatch: 'full'
      }
    ]
  },
];

我可以从ClientDetailPage访问:id,但是当我尝试从ProfilePage抓取它时,它是不可访问的:

// ClientDetailsPage
console.log(this.route.snapshot.paramMap.get('id)
// returns the correct value

// ProfilePage
console.log(this.route.snapshot.paramMap.get('id))
// returns null
console.log(this.route.parent)
//returns null

我缺少什么吗?可能值得注意的是,ClientDetailsPageProfilePage都有单独的模块。

1 个答案:

答案 0 :(得分:0)

以下内容将访问已激活路由的id参数。

this.route.snapshot.paramMap.get('id');

但是使该方法不起作用的是被认为是激活的路由。只有匹配的确切子路由才被视为已激活路由,因此,包含id参数的路由的父级不在激活路由中。

// assuming a route like clients/2/profile
{
    path: 'profile',
    component: ProfilePage
}

好消息是,您可以如下所示访问该路由的父对象。

// calling route.parent moves us one route up the tree, where id is a param
this.route.parent.snapshot.paramMap.get('id');