2017-04-25 22 views
1

我在Angular 4.0.0 SPA中只有幾個導航鏈接,它們的查詢字符串不同。我建立他們是這樣的:當我點擊一個使用routerLink和queryParams建立的鏈接時,爲什麼沒有發生?

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

[編輯]

這裏的路由器調試:你可以看到什麼是

console screenshot

+0

我還沒有看到一個空的routerLink數組。不知道它會知道如何在那裏沒有東西路線?我很驚訝懸停正在給你正確的路線,所以也許它會工作?你能否組織一個可以證明我們可以用來幫助解決問題的問題的解決方案? – DeborahK

+0

在這方面......關於空/空路線的這種對話可能會引起關注:https://github.com/angular/angular/issues/6971。從快速瀏覽中,它聽起來像是讓路線走向自己。我認爲*是*你想要什麼? – DeborahK

+0

是的,我只想回到相同的路線,但查詢字符串已更改。我的組件具有一些代碼,用於檢查查詢字符串並從API獲取新數據。但該代碼沒有運行。 – Eliot

回答

1

的一種方式與路由發生是打開路由追蹤。我在這裏有一個例子:https://github.com/DeborahK/Angular-Routing

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

謝謝!在上面的編輯中添加了這一點。 – Eliot

相關問題