Question

给出根路由模块

const appRoutes: Routes = [
    {
        path: '',
        component: HomeComponent,
        children: [
            {
                path: 'users',
                loadChildren: './pages/users/users.module#UsersModule'
            }
        ]
    },
    {path: '', redirectTo: '', pathMatch: 'full'},
    {path: '**', redirectTo: '/login'}
];

export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

和用户路由模块

const usersRoutes: Routes = [
    {
        path: '', component: UsersComponent,
        children: [
            {path: 'admittances', component: AdmittancesComponent},
            {path: 'admittance/:id', component: AdmittanceDetailComponent}
        ]
    }
];

export const usersRouting: ModuleWithProviders = RouterModule.forChild(usersRoutes);

我想从AdmittancesComponent导航到AdmittanceDetailComponent。

但是，而不是使用

this._router.navigate(['admittance', id]); // ERROR

我宁愿使用

this._router.navigate(['users/admittance', id]); // WORKS

有人可以解释为什么第一个例子不起作用，为什么第二个例子修复它？

Answer 1

以下链接来自Angular文档：https://angular.io/guide/router#relative-navigation

对于使用.navigate的相对路由，您需要这样的语法：

this.router.navigate([crisis.id], { relativeTo: this.route });

Answer 2

这很简单 appRoutes是主要路线，用户路线是主要路线的子路线。由于您已将appRoutes中路径的名称定义为“用户”，因此这将是您的第一个url参数，因此domain.com/users/childRoutes ...

现在，您已经定义了一个名为admitance的子项，它将以您的父路由用户/ so domain.com/users/admitance

为前缀

如果您在appRoutes中定义了路线“admitance”，那么它会起到第一个声明的作用

Angular 2路由器：导航到其他组件

2 个答案: