Angular2 路由器导航

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

您应该提供从父级开始的完整路径

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

Answer 2

如果要导航到当前路由的子路由（例如从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 answerTetraDev 中找到更多导航案例。

---

更新：如果导航时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 });
}