Question

我有一些带有不同网址前缀的嵌套模块。现在我想在一个模块中导航而不指定前缀（在我的模块中，我不想知道模块可以访问哪个前缀）。

这些是我app.module的路线：

const APP_ROUTES: Routes = [
    {
        path: '',
        children: [
            { path: '', component: MainComponent },
            { path: 'nested', loadChildren: 'app/nested/nested.module#NestedModule' }
        ]
    }
];

export const routing = RouterModule.forRoot(APP_ROUTES, { useHash: true });

这些是我的nested.module的路由：

const APP_ROUTES: Routes = [
    {
        path: '',
        component: NestedComponent,
        children: [
            { path: '', component: NestedSubComponent },
            { path: 'sub', component: NestedSubComponent },
            { path: 'sub/:id', component: NestedSubComponent }
        ]
    }
];

export const routing = RouterModule.forChild(APP_ROUTES);

现在我想要从/＃/ nested / sub导航到/＃/ nested / sub / 123。我怎样才能做到这一点？我不知道我嵌套在我的子模块中有多深（即如果我的子路由是/或/ sub或/ sub /：id）而且我也不想使用嵌套前缀，因为我想要一个通用的解决方案，它可以也用于其他子模块。

Answer 1

您可以使用Router.navigate()方法的第二个参数指定relativeTo选项，然后它将相对于该路线导航。

constructor(private router: Router, 
            private activatedRoute: ActivatedRoute) {}

goDeeper() {
    this.router.navigate(['next-nested-route'], {relativeTo: this.activatedRoute});
}

goBack() {
    this.router.navigate(['../'], {relativeTo: this.activatedRoute});
}

你也可以使用routerLink指令，其中ActivatedRoute隐式设置，只是不要把第一个斜杠放在那里。

<a routerLink="/next">absolute</a>
<a routerLink="next">relative next</a>
<a routerLink="..">relative back</a>

有关角度文档的更多信息：https://angular.io/guide/router#!#relative-navigation

相对于Angular中的子模块进行导航

1 个答案: