Question

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

主窗口组件包含导航栏，侧边栏，地图和div的模板，当我单击地图上的标记时，该模板应弹出并占据屏幕的右侧部分。我将所有这些部分放在每个部分的一个组件中，以便轻松访问其他部分中的变量。当我点击标记时，我想在右侧弹出的div不是maps API中存在的弹出窗口;它是一个div我硬编码到组件的模板中，我隐藏它或根据组件中的标志显示它（我必须明确这一点）。
一个main-window.html模板，包含导航栏div，侧边栏div，带有id="google-map的地图div，以及带有ngIf隐藏它的高亮部分div，只要{{{ 1}}组件中的标志设置为false

这是应该实现此目的的代码：

this.highlightsSection

您会看到这两个处理函数：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()函数，该函数又会在地图右侧显示高亮显示div的此权限部分。

问题是toggleHighlights()似乎无法触发点击上的marker.addEventListener()，我无法理解为什么

我是angular2和typescript的新手，我以前做过类似事情的唯一方法就是使用jquery和DOM，但我需要有组件的概念来存储多个标志和变量，我可以＆＃39;实现这个目标

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

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

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

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

所以，请在投票前尝试... :)并点击答案，如果这适合你......：）

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

1 个答案: