如何通过 URL 导航加载子路由？答案

【问题标题】：How can I load child route with navigate by URL?如何通过 URL 导航加载子路由？
【发布时间】：2019-09-02 07:30:58
【问题描述】：

我有一条子路线。我试图路由到这条子路由，但没有成功。如果我将这条路线放在子数组之外（作为独立路线），那么它可以工作，但不在子数组中。路由器出口标签也在父 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})
  }

【问题讨论】：

我应该是 url: 'adminpanel/specific-role-section/${roleId}' 因为它是包含管理面板的路径的子路由。

标签： angular

【解决方案1】：

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

//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})
  }

【讨论】：