Question

我有一个使用Angular Google Maps（AGM）https://angular-maps.com/的Angular 5应用。我有代码，如果您从一个组件单击列表中的项目，它会在单独的地图组件中打开特定标记的子infoWindow。我通过在infoWindow组件中更改属性isOpen来完成此操作。我希望能够在打开新的infoWindow时关闭任何打开的infoWindows。我无法弄清楚如何获取与特定标记关联的子infoWindow的实例。

这是地图组件HTML：

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <agm-marker id="{{ m.id }}" *ngFor="let m of markers; let i = index"
    [latitude]="m.latitude" [longitude]="m.longitude"
    [markerDraggable]="false" [iconUrl]="iconMarker" [openInfoWindow]="true">
      <agm-info-window [disableAutoPan]="false" [isOpen]="m.isOpen">
        <strong>{{ m.name }}<br>
        {{ m.address }}<br>
        {{ m.city }}, {{ m.state }} {{ m.zipcode }}
      </agm-info-window>
    </agm-marker>
    <mapcontent (onMapLoad)='loadAPIWrapper($event)'></mapcontent>
  </agm-map>

这是地图组件：

ngOnInit() {
    this.markersService.currentMarker.subscribe(
      (marker: Object) => {
        this.currentMarker = marker;
        this.isOpen = false;
        if ( this.currentMarker && this._map ) {
          this.markerZoom();
        }
    });
}
public loadAPIWrapper(map) {
        this._map = map;
      }
public markerZoom(){
        this.currentMarker.isOpen = true;
        const latlng = <LatLngLiteral>{
          lat: this.currentMarker.latitude, lng: this.currentMarker.longitude
        };
        this._map.setCenter( latlng );
        this._map.setZoom(9);

      }

Answer 1

你可以使用

@ViewChild(infoWindow) infoWindow:Window

如果您的子组件是单个组件，

如果你想获得你孩子组件的列表

你可以使用

@ViewChildren

按组件类型获取所有子组件。

希望这会对你有所帮助。

Answer 2

我无法使用ViewChild让它工作。我找到了另一种解决方案。我在infowindow组件中使用isOpen属性。在通过将isOpen设置为true将当前标记的infowindow设置为打开之前，我遍历所有标记并将isOpen设置为false。我宁愿不使用foreach循环，但它是我发现的唯一解决方案。

https://twitter.com/intent/tweet?text=My+text&hashtags=bransonpickel

需要在角度5中访问google地图标记的子infoWindow

2 个答案: