关于angular：从我的主路由相对于子路由导航


navigate relative to child route from my main routing

我的 app.routing forRoot() 文件：

1
2
3
4
const APP_ROUTES: Routes = [
  {path: 'immeuble', loadChildren: 'app/immeuble/immeuble.module#ImmeubleModule'},
  {path: '', component: HomeComponent}
];

在我的功能模块 ImmeubleModule 我有 immeuble.routing forChild 文件

1
2
3
4
5
6
7
8
9
10
11
const IMMEUBLE_ROUTES: Routes = [

  { path: ':id', component: ImmeubleComponent, children: [
    { path: 'general', component:GeneralComponent  },
    { path: 'objet', component:GeneralComponent  },
    { path: '**', redirectTo:'general', pathMatch:'full' },
  ] },
  { path: '', component: ImmeubleComponent , pathMatch:'full',children:[
    { path: '', component:AccueilComponent  },
  ]},
];

我的实际路径是 immeuble/2/general

通过这条路径，我有两条激活的路线：

  • AppComponent 中的根出口(/immeuble 时匹配)
  • 作为根出口的孩子，我在 ImmeubleComponent 中有出口(在 /2/general 上匹配)

    • 我的 AppComponent 中有所有链接，所以我想添加一个链接以导航到 /immeuble/2/object 而不指定 /immeuble/2 我只想要类似：

    1
    router.navigate(['object'], relativeTo: activatedRoute[ImmeubleComponent])

    我怎样才能做到这一点？

    您可以注入和使用 ActivatedRoute 来查询当前路线和子路线，以便导航您想要的实际路线。

    在您的情况下，您可以使用 ActivatedRoute.children 方法获取子数组，然后查找最深的数组并用作导航的参数：

    1
    this.router.navigate(['./', {params}], { relativeTo: _.last(this.route.children) });
    • 在此示例中，您可以更新当前路线的参数，但您也可以导航到上层('../')或与当前相关的其他路线。
    • 我假设最后一个孩子是最深的，但我还没有测试过。就我而言，来自 ActivatedRoute 的 firstChild 方法就足够了:)。