Question

我在使用googlemaps上的标记的点击监听器上使用router.navigate时遇到了问题。页面网址将更改为所需的路径，但出口不会更改视图。

＆＃13;

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]);
        });
      }
    }
  }

＆＃13;

这就是添加事件监听器的方法。

＆＃13;

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
      }
    ])
  ],

＆＃13;

这些是我的路径，任何其他导航在应用程序内完美运行。

感谢您的帮助。

Answer 1

以某种方式在Google.Maps.Listener中添加de listener使导航方法在ngzone之外运行。使用Ngzone.run解决它并以这种方式运行导航。

Answer 2

我遇到了同样的问题。事实证明，如果params在路径中没有改变，那么组件将不会重新初始化。由于您的路径是'tanque /：id'，因此您需要使用Observables来检测param何时发生更改并触发更新。

角度路由器教程有一个很好的例子，可以使用带有参数的路径以及如何合并Observables：https://angular.io/guide/router

router.navigate更改了网址，但视图无法更改

2 个答案: