Uncaught TypeError: Kann die Eigenschaft 'navigateByUrl' von undefined nicht lesen

Question

Ich füge mehrere Markierungen zu Google Maps hinzu. Was ich möchte, wenn der Benutzer auf den Marker klickt, sollte er zu der Seite navigieren, wo mehr Informationen über diesen Ort präsentiert werden.

Ich verwende Angular 4.2.4 und Google Maps JavaScript API (nicht SebastianM's angular-google-maps Bibliothek).

Hier ist, was ich zur Zeit versucht:

// 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}`) 
}); 

Aber es gibt immer die folgenden Fehler, wenn darauf geklickt:

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 

Was zu einer bestimmten URL den richtigen Weg zu routen ist, wenn jemand Klicks auf einem Marker?

EDIT - Hier ist, was meine Komponente wie folgt aussieht:

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

    // ... 
} 

Answer 1

Ihr Fehler bei googleMarker.addListener('click', function() {...} befindet. Mit function() ändert sich der Kontext des this-Schlüsselworts.

Verwenden Sie stattdessen einen fetten Pfeil, die den Kontext bewahrt: googleMarker.addListener('click',() => {...}