当我单击由routerLink和queryParams构建的链接时，为什么什么也没发生? [英] Why does nothing happen when I click on a link built with routerLink and queryParams?

问题描述

我在Angular 4.0.0 SPA中有一些导航链接，它们仅因其上的查询字符串而异.我正在像这样构建它们:

I have a few navigation links in an Angular 4.0.0 SPA that vary only by the query string on them. I'm building them like this:

  <!-- MONTH -->
  <li class="right">
    <a [routerLink]="[]" [class.active]="insights.interval===2" queryParamsHandling="merge" [queryParams]="{range: 'MONTH'}">
      <span>M<strong>MONTH</strong></span>
    </a>
  </li>

  <!-- WEEK -->
  <li class="right">
    <a [routerLink]="[]" [class.active]="insights.interval===1" queryParamsHandling="merge" [queryParams]="{range: 'WEEK'}">
      <span>W<strong>WEEK</strong></span>
    </a>
  </li>

如果我然后将鼠标悬停在这些链接上，它们看起来是正确的:

If I then hover over these links they look correct:

/insights/brand/5889cdfea7eb8f0e7c56bc9f?range=MONTH
/insights/brand/5889cdfea7eb8f0e7c56bc9f?range=WEEK

但是当我单击它们时，什么也没有发生.没有达到组件中设置的断点.

But when I click them, nothing happens. No breakpoint set in the component is reached.

我如何调试路由器并弄清楚为什么什么也没发生?

How do I debug the router and figure out why nothing is happening?

我在这里什么也没通过没事吗?

Is it ok that I'm passing nothing in here?

[routerLink]="[]"

这是路由，以防万一:

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'insights',
        component: InsightsComponent,
        canActivate: [User],
        children: [
          {
            path: 'brand/:id',
            component: InsightsBrandComponent
          },
          {
            path: 'brand-item/:id',
            component: InsightsBrandItemComponent
          },
          {
            path: 'item/:id',
            component: InsightsItemComponent
          },
          {
            path: 'venue/:id',
            component: InsightsVenueComponent
          }
        ]
      }
    ])
  ],
  exports: [RouterModule]
})
export class InsightsRoutingModule { }

这是路由器调试:

推荐答案

查看路由的一种方法是打开路由跟踪.我在这里有一个示例: https://github.com/DeborahK/Angular-Routing

One way you can see what's happening with routing is to turn on route tracing. I have an example here: https://github.com/DeborahK/Angular-Routing

    RouterModule.forRoot([
        { path: 'welcome', component: WelcomeComponent },
        { path: '', redirectTo: 'welcome', pathMatch: 'full' },
        { path: '**', component: PageNotFoundComponent }
    ], { enableTracing: true })

这篇关于当我单击由routerLink和queryParams构建的链接时，为什么什么也没发生?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！