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

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

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

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

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

Answer 2

很简单 appRoutes 是主路由，users 路由是 Main Route 的子路由。由于您将 appRoutes 中的路径名称定义为 'users' ，因此这将是您的第一个 url 参数，因此 domain.com/users/childRoutes ...

现在您已经定义了名为 admission 的子项，它将以您的父 Route users / so 域为前缀。com/users/admitance

如果您在 appRoutes

中定义了路由 'admitance'，那么第一条语句就会起作用

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

Angular 2 Router: Navigating to other components

angular-routing

angular