2017-09-11 79 views
0

我在使用router.navigate在Google地圖中的標記的點擊偵聽器時遇到了問題。頁面URL更改爲所需的路徑,但出口不會更改視圖。router.navigate更改url,但視圖不會更改

loadEquipos(locacion: Locacion) { 
 
    for (let i = 0; i < this.equipos.length; i++) { 
 
     if(this.equipos[i].idLocacion === locacion.id) { 
 
     const marker = new google.maps.Marker({ 
 
      position: new google.maps.LatLng(this.equipos[i].mapData.center.lat, this.equipos[i].mapData.center.lng), 
 
      map: map, 
 
      label: { 
 
      color: 'black', 
 
      fontWeight: 'bold', 
 
      text: this.equipos[i].nombre, 
 
      }, 
 
      idEquipo: this.equipos[i].id 
 
     }); 
 
     google.maps.event.addListener(marker, 'click',() => { 
 
      this.router.navigate(['/tanque', marker.idEquipo]); 
 
     }); 
 
     } 
 
    } 
 
    }

那女巫中添加事件偵聽器的方法。

RouterModule.forRoot([ 
 
     { 
 
     path: 'admLocaciones', 
 
     component: AdmLocacionesComponent 
 
     }, 
 
     { 
 
     path: '', 
 
     redirectTo: '/inicio', 
 
     pathMatch: 'full' 
 
     }, 
 
     { 
 
     path: 'inicio', 
 
     component: InicioComponent 
 
     }, 
 
     { 
 
     path: 'buscarLocacion/:id', 
 
     component: BuscarLocacionComponent 
 
     }, 
 
     { 
 
     path: 'editarLocacion/:id', 
 
     component: EditarLocacionComponent 
 
     }, 
 
     { 
 
     path: 'nuevaLocacion', 
 
     component: NuevaLocacionComponent 
 
     }, 
 
     { 
 
     path: 'admRegiones', 
 
     component: AdmRegionesComponent 
 
     }, 
 
     { 
 
     path: 'locacion/:id', 
 
     component: LocacionComponent 
 
     }, 
 
     { 
 
     path: 'tableroTanque', 
 
     component: TableroTanqueComponent 
 
     }, 
 
     { 
 
     path: 'tanque/:id', 
 
     component: TanqueComponent 
 
     } 
 
    ]) 
 
    ],

,而這些都是我的路,任何其他的導航工作完全正常的應用程序中。

感謝您的幫助。

+0

如果您在瀏覽器地址欄中鍵入這些路徑,那麼這些路徑會起作用嗎? – BogdanC

+0

是的,如果我使用導航功能更改路徑後重新加載頁面,它將加載應該顯示的視圖。 –

+0

控制檯中是否顯示任何內容?這個'marker.idEquipo'確實被設置爲一個值嗎?嘗試打開事件追蹤,看看是否能告訴你任何事情。 (您的導航調用的語法看起來是正確的。) – DeborahK

回答

0

我遇到了同樣的問題。事實證明,如果參數在路徑中沒有改變,那麼組件將不會被重新初始化。由於您的路徑是'tanque /:id',因此您需要使用Observables來檢測param何時發生更改並觸發更新。

的角路由器教程具有利用使用參數路線和如何將觀測量的一個很好的例子:https://angular.io/guide/router

1

不知何故加入去監聽內部的Google.Maps.Listener所作的ngzone之外運行導航方法。使用Ngzone.run解決它並運行該方式的導航。