角度-无法使用Bing Map图钉单击重定向到另一个组件

Question

Bing Map Push pin is clicked, but Router gets undefined in the console log.

so unable to redirect. If I added router.navigate in the constructor it is working perfectly.

Below is my code

  import { Component, ViewChild, OnInit } from '@angular/core'; import { } from "bingmaps/scripts/MicrosoftMaps/Microsoft.Maps.All" import {Router,ActivatedRoute} from '@angular/router'; @Component({ selector: 'device-map', templateUrl: './device-map.component.html' }) export class DeviceMapComponent implements OnInit{ @ViewChild('myMap') myMap; constructor(public router: Router, public route: ActivatedRoute,) { console.log(this.router); } pushpinClicked(e){ console.log("I am clicked"); console.log(this.router); this.router.navigate(['/Dashboard'], { queryParams: { deviceId: e.target.metadata.title } }); } ngOnInit(){ var map = new Microsoft.Maps.Map(this.myMap.nativeElement, { credentials: 'My key', center: new Microsoft.Maps.Location(47.6149, -122.1941) }); var infobox = new Microsoft.Maps.Infobox(map.getCenter(), { title: "Microsoft", description: "City Center", visible: false, }); infobox.setMap(map); var randomLocation = Microsoft.Maps.TestDataGenerator.getLocations(1, map.getBounds()); var pin = new Microsoft.Maps.Pushpin(map.getCenter(), { title: 'Microsoft' }); pin.metadata = { title: 'Device 1', description: 'Pin discription' }; Microsoft.Maps.Events.addHandler(pin, 'click', this.pushpinClicked); map.entities.push(pin); } } 

Answer 1

Below is a way to add navigation for push pin click (Bing map). Arrow function is required.

Microsoft.Maps.Events.addHandler(pin, 'click',  () => {
 this.router.navigateByUrl('/dashboard');});