未捕获TypeError：无法读取undefined属性'navigateByUrl'

我正在向Google地图添加多个标记。我想要发生的是，当用户点击标记时，它应该导航到提供关于该位置的更多信息的页面。未捕获TypeError：无法读取undefined属性'navigateByUrl'

我使用的是Angular 4.2.4和Google Maps JavaScript API（不是SebastianM's angular-google-maps库）。

这里就是我目前正试图：

// declare router and injected it into constructor 
... 

var googleMarker = customMarker.createMarker(); 
googleMarker.addListener('click', function() { 
    console.log(`Clicked on marker`) 
    this.router.navigateByUrl(`/drivers/${driver.id}`) 
});

但它总是返回单击时出现以下错误：

Uncaught TypeError: Cannot read property 'navigateByUrl' of undefined 
    at _.Me.<anonymous> (map.component.ts:118) 
    at Object._.A.trigger (js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99) 
    at BU.handleEvent (marker.js:51) 
    at jy._.k.de (map.js:45) 
    at jy._.k.Ki (map.js:43) 
    at Object._.A.trigger (js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99) 
    at hq.<anonymous> (common.js:132) 
    at Object._.A.trigger (js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99) 
    at hq._.k.Wi (common.js:192) 
    at HTMLDivElement.<anonymous> (js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:36) 
(anonymous) @ map.component.ts:118 
_.A.trigger @ js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99 
BU.handleEvent @ marker.js:51 
_.k.de @ map.js:45 
_.k.Ki @ map.js:43 
_.A.trigger @ js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99 
(anonymous) @ common.js:132 
_.A.trigger @ js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99 
_.k.Wi @ common.js:192 
(anonymous) @ js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:36 
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424 
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191 
ZoneTask.invoke @ zone.js:486

正确的方法是什么路由到一个给定的URL，当有人点击在一个标记？

编辑 - 这是我的部分是什么样子：

import { Component, OnInit, Input } from '@angular/core'; 
import { ActivatedRoute, RouterModule, Router } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database'; 

import { Coordinate } from '../../models/coordinate.model'; 
import { CustomMarker } from '../../models/custom-marker.model'; 

declare var google: any; 
declare var MarkerClusterer: any; 

@Component({ 
    selector: 'app-map', 
    templateUrl: './map.component.html', 
    styleUrls: ['./map.component.css'] 
}) 
export class MapComponent implements OnInit { 

    // ... 

    constructor(private db: AngularFireDatabase, private route: ActivatedRoute, private router: Router) { } 

    ngOnInit() { 
     // ... 

     // Drivers 
     this.drivers = this.db.list('/drivers'); 
     this.subDrivers = this.drivers.subscribe(snapshot => { 
      this.stopsSnapshot = snapshot; 

      // Calculate map bounds based on markers 
      snapshot.forEach(driver => { 
       // Add stop marker to map 
       var customMarker = new CustomMarker(driver.color, 'driver', null, driver, this.map, "D"); 

       var googleMarker = customMarker.createMarker(); 
       googleMarker.addListener('click', function() { 
        this.router.navigateByUrl(`/drivers/${driver.id}`) 
       }); 
      }); 
     }); 
    } 

    // ... 
}

来源

2017-06-29 narzero

第一个问题：你宣布你的路由器和它注入你的构造？ – trichetriche

@trichetriche，是的，我做到了。 – narzero

你可以发布你的组件的整个代码？初始化路由器时显然做错了。 – trichetriche

你的错误是位于googleMarker.addListener('click', function() {...}。使用function()更改此关键字的上下文。

相反，使用脂肪箭头它保留了背景：googleMarker.addListener('click',() => {...}

来源

2017-06-29 08:53:37 trichetriche

未捕获TypeError：无法读取undefined属性'navigateByUrl'

回答

相关问题