angular - 为什么当我单击使用 routerLink 和 queryParams 构建的链接时没有任何反应？

Question

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

  <!-- 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>

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

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

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

如何调试路由器并找出没有任何反应的原因？

我可以不在这里传递任何内容吗？

[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 { }

[编辑]

这是路由器调试:

Answer 1

查看路由发生情况的一种方法是打开路由跟踪。我这里有一个例子:https://github.com/DeborahK/Angular-Routing

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