Question

我试图在我的应用程序中测试路由器导航，但是每当我尝试导航到我的网址时，我都会被扔回主页。

当用户选择一行来填写表单时，路由器应导航到下一页，如下所示：

  onUserRowSelect(event): void {
    this.router.navigate(['myform']);}

然而，myforms没有导航到，下面是我如何定义路线：

    const routes: Routes = [
  {
    path: '',
    component: UserAdminComponent,
    children: [
      {
        path: 'createuser',
        component: CreateUserComponent
      },
      {
        path: 'updateuser',
        component: UpdateUserComponent,
        children: [
          {
            path: 'myform',
            component: UpdateFormComponent,
          }
        ]
      },
    ]
  },

];

因此导航到myURL/useradmin/updateuser/myform根本不起作用（如果子路径工作正常）。

如果需要，我可以详细说明。谢谢

Answer 1

如果您想导航到当前路线的子路线（例如从updateuser到updateuser/myform），您可以使用相对导航：

import { Router, ActivatedRoute } from '@angular/router';

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

onUserRowSelect(event): void {
    this.router.navigate(['./myform'], { relativeTo: this.route });
}

您可以通过this detailed answer在TetraDev中找到更多导航案例。

更新：如果导航时UpdateFormComponent要替换UpdateUserComponent，那么他们应该都是UserAdminComponent的直接子女：

  const routes: Routes = [
  {
    path: '',
    component: UserAdminComponent,
    children: [
      {
        path: 'createuser',
        component: CreateUserComponent
      },
      {
        path: 'updateuser',
        component: UpdateUserComponent
      },
      {
        path: 'myform',
        component: UpdateFormComponent
      }
    ]
  }];

并且导航将以这种方式执行：

onUserRowSelect(event): void {
    this.router.navigate(['../myform'], { relativeTo: this.route });
}

Answer 2

您应该提供从父

开始的完整路径

   this.router.navigate(['useradmin','updateuser','myform']);}

Angular2路由器导航

2 个答案: