代码之家 › 专栏 › 技术社区 › Steve Fitzsimons

角度6相同的路由器。当从另一个组件调用时,导航会导致刷新

angular-router typescript angular

2

Steve Fitzsimons · 技术社区 · 8 年前

我有一个路由模块,如下所示:

应用程序路由模块

const routes: Routes = [
  {
    path: '',
    redirectTo: environment.devRedirect,
    pathMatch: 'full',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 'customers/:customerId/contracts/:contractId',
    loadChildren: './grouping/grouping-routing.module#GroupingRoutingModule'
    canActivate: [AuthenticationGuard],
  }
];

以及具有路由的子组件:

const routes: Routes = [
      {
        path: 'create',
        component: CreateEditComponent,
        data: { animation: 'create' },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: ':groupId/edit',
        component: CreateEditComponent,
        data: { animation: 'edit' },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: '',
        component: OverviewComponent,
        data: { animation: 'overview' },
        canActivate: [ AuthenticationGuard ]
      }
];

我有一个顶级的navbar组件,它位于app.component.html中。

navbar组件和createeditcomponent都有一个如下所示的函数。两者都是使用按钮调用的(单击):

  goToOverview(): void {
    this._router.navigate(['customers/:customerId/contracts/:contractId']);
  }

当我调试路由器对象时,两者看起来完全相同,即拥有所有相同的路径等。

我的问题是navbar函数正确地路由,但是createeditcomponent导航,追加一个?然后重新加载页面。这里我遗漏了什么,为什么两个看似相似的调用在activatedroute对象相同时会有如此不同的结果?

2 回复 | 直到 8 年前

1

3

Steve Fitzsimons 8 年前

终于弄清楚了是什么引起了刷新。按钮和 (click) 导致刷新的处理程序位于 <form> 标签。每当调用click函数时,路由器就开始导航,导致表单提交,这似乎是原因

2

1

bryan60 8 年前

您使用的是相对url,这意味着您要相对于路由器树中的当前组件位置进行导航。

navbar位于根组件中,因此它相对于路由器根目录(即“/”)进行导航。

createeditcomponent是根的一个子路由,所以它是相对于路由器的第一个子路由的,可能是“/create”或者其他什么,我不确定你的路由器是如何从这个问题中构造出来的。但基本上,每次嵌套路由器出口/添加子路由时,都会在路由器树中创建一个新节点。

但重要的一点是,这样做:

 this._router.navigate(['/customers/:customerId/contracts/:contractId']);

前面有一个“/”将使它成为一个绝对的url,无论从哪里调用它,它都将指向同一个位置,因为它总是从根目录导航。

您可能看到了奇怪的刷新行为,因为您试图导航到一个无效的路由,并导致一个错误被处理得很差。

我个人认为,fwiw,嵌套路由器插座很酷,而且它们提供了大量的能量,但它们也在您的应用程序中创建了许多复杂性。适当地使用它们,但在使用它们时要谨慎,并尽可能倾向于更平坦的结构。