未捕获的TypeError：无法读取未定义的属性'navigateByUrl'

Question

I'm adding multiple markers to Google Maps. What I would like to happen is when the user clicks on the marker, it should navigate to the page where more information about that location is presented.

I'm using Angular 4.2.4 and Google Maps JavaScript API (not SebastianM's angular-google-maps library).

Here's what I'm currently trying:

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

But it always returns the following error when clicked:

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

What is the correct way to route to a given url when someone clicks on a marker?

EDIT - Here's what my component looks like:

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

Your error is located at googleMarker.addListener('click', function() {...} . using function() changes the context of the this keyword.

Instead, use a fat arrow which preserves the context : googleMarker.addListener('click', () => {...}