Angular 2谷歌地图标记点击事件触发DOM在DOM中的外观

Question

所以我有一个角2应用程序应该有一个地图，侧边栏和导航栏。该地图应该是在侧边栏和导航栏下的所有窗口。角结构如下：

1. 一个主窗口组件方含的导航栏，边栏，图中的模板和一个div应该弹出，当我点击标记取屏幕的右侧部分在地图上。我将它们全部放在每个部分的一个组件中，以便轻松访问其他部分中的变量。当我点击标记时，我想在右侧弹出的div不是地图API中存在的弹出窗口;这是一个div，我硬编码到组件的模板中，我隐藏它或根据组件中的一个标志显示它（我必须清楚）。

2. ，其包括导航栏的div，边栏DIV，地图DIV与id="google-map，和亮点截面分度ngIf隐藏它只要在该组件的this.highlightsSection标志被设置主-window.html模板假

这是一个数字应实现这一目标的代码：你看这两个处理函数

import { Component, OnInit } from '@angular/core'; 
import { Sensor } from '../entities/sensor'; 

declare const google: any; 

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

highlightsSection: boolean = false; 

zoom: number = 14; 
lat: number = 26.67946; 
lng: number = -80.41719; 
map: any; 
marker: any; 
mapProp: any = { 
    center: new google.maps.LatLng(this.lat, this.lng), 
    zoom: this.zoom, 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
}; 


constructor() { } 

ngOnInit() { 
    this.map =new google.maps.Map(document.getElementById("google-map"), this.mapProp); 
} 

toggleHighlights(): void { 
    if(!this.highlightsSection) { 
     this.highlightsSection = true; 
    } else { 
     this.highlightsSection = false; 
    } 
} 

registerMarkers(): void { 
    this.marker = new google.maps.Marker({ 
     position: {lat: this.lat, lng: this.lng}, 
     title: "Hello world!" 
    }); 
    this.marker.setMap(this.map); 
    this.marker.addListener('click', function() { 
     // What should go here to allow the marker to change the flag value of highlightsSection variable?? 
    }); 
}  
} 

：this.toggleHighlights()和this.registerMarkers() 我需要使用它们，如下所示我需要在侧栏中有一个按钮来触发this.registerMarkers()之一来显示标记（直到此时它运行良好）并在此this.registerMarkers()之内显示标记之后我需要添加事件聆听者点击标记以触发另一个toggleHighlights()函数，该函数依次显示地图右侧的高亮div的权利部分。

的问题是，它似乎marker.addEventListener()无法触发点击的this.toggleHighlights()，我不明白为什么

我是新来的都angular2和打字稿，我已经做了类似的唯一途径以前是通过使用jquery和DOM，但我需要有组件的概念来存储多个标志和变量，我不能达到这个

PS：我已经尝试了塞巴斯蒂安agm第三方组件，它是非常有限的功能，所以我不能依靠它

如果有人帮我弄清楚这里发生了什么，我会很高兴

Answer 1

你可以尝试使用闭包;如下图所示：

registerMarkers(): void { 
    var toggler =() => { 
     // toggle the flag here 
    } 

    this.marker = new google.maps.Marker({ 
     position: {lat: this.lat, lng: this.lng}, 
     title: "Hello world!" 
    }); 
    this.marker.setMap(this.map); 
    this.marker.addListener('click', function() { 
     toggler(); 
    }); 
} 

就个人而言，我不喜欢高/推荐这个解决方案，但我认为，这种解决办法将工作（在最后，直到你找到一些其他的解决方案）。当我使用相同的条件时，我也遇到了类似的情况，因为我没有找到任何其他解决方案。

另外，请注意，我没有发布之前运行此代码，但只是为了给你提示。

所以，请尽量先下去投票... :)和命中的答案，如果这对你的作品...... :)