时间戳

首页 > 解决方案 > 如何通过 URL 导航加载子路由？

angular - 如何通过 URL 导航加载子路由？

问题描述

我有一条儿童路线。我试图路由到这条子路由，但没有成功。如果我将这条路线放在子数组之外（作为独立路线），那么它可以工作，但不在子数组中。路由器出口标签也在父 HTML 模板中。我究竟做错了什么？

  {path:'adminpanel',component:AdminPanelComponent,canActivate:[AuthGuard],data :{permittedRoles:['Admin']},
  children:[
//it des not work here
    {path:'specific-role-section/:roleId' , component:SpecificRoleSectionComponent}
  ]},
//it works here
  // {path:'specific-role-section/:roleId' , component:SpecificRoleSectionComponent}


//the caller method
 openRoleSection(roleId:string)
  {
    // this.router.navigateByUrl(`specific-role-section/${roleId}` ,  {relativeTo: this.activatedRoute})
    this.router.navigate([`specific-role-section/${roleId}`] ,  {relativeTo: this.activatedRoute})
  }

标签： angular

解决方案

问题似乎出在您的调用者方法上。修改如下导航方法。

//the caller method
 openRoleSection(roleId:string)
  { 
    // Try this way
    this.router.navigateByUrl(`adminpanel/specific-role-section/${roleId}` ,  {relativeTo: this.activatedRoute});

    this.router.navigate([`adminpanel/specific-role-section/${roleId}`] ,  {relativeTo: this.activatedRoute})
  }

推荐阅读