Wie öffnet/schließt man ein Snazzy-Info-Fenster programmatisch in angular-google-maps?

Question

Wenn ich agm-info-window bin, können Sie rufen zum Öffnen/Schließen programmatisch von der Steuerung

Vorlage:

<agm-data-layer [geoJson]="geoJsonObject" [style]="styleFunc" (layerClick)="clicked($event, gm, infoWindow)" > 
    <agm-info-window [disableAutoPan]="true" 
        [latitude]="infoWindowLat" 
        [longitude] = "infoWindowLong" 
        [isOpen]="infoWindowIsOpen"] 
         #infoWindow> 
     {{infoWindowText}} 
    </agm-info-window> 
    </agm-data-layer> 

Controller:

clicked(clickEvent, gm, infoWindow) { 

if (gm.lastOpen != null) 
{ 
    gm.lastOpen.close(); 
} 

gm.lastOpen = infoWindow; 
infoWindow.open(); 

}

Aber wenn ich <agm-snazzy-info-window> verwenden , open() und close() sind nicht definiert.

<agm-snazzy-info-window [isOpen]="infoWindowIsOpen" 
          [latitude]="infoWindowLat" 
          [longitude]="infoWindowLong" 
          [closeWhenOthersOpen]="true" 
          [closeOnMapClick]="true" 
          [showCloseButton]="false" 
          [openOnMarkerClick]="true" 
          ([backgroundColor]="'#FFF'" 
          #infoWindow> 
     <ng-template> 
     {{infoWindowText}} 
     </ng-template> 
    </agm-snazzy-info-window> 

Wie kann ich einen <agm-snazzy-info-window> vom Controller öffnen/schließen?

Answer 1

agm-info-windowcomponent nicht open Methode Bit aussetzt Sie die Sichtbarkeit von Infofenster Instanz über folgende Eingänge steuern könnten: isOpen, latitude und longitute wie folgt aus:

clicked(clickEvent, gm, infoWindow) { 
    this.infoWindowLat = clickEvent.latLng.lat(); 
    this.infoWindowLong = clickEvent.latLng.lng(); 

    this.infoWindowIsOpen = true; 
} 

Answer 2

Sie können in der Tat führen die isOpen dynamisch offen verwenden/schließe das Snazzy-Info-Fenster.

/* component.ts */  
     isSnazzyInfoWindowOpened: boolean = false; 

     constructor(@Inject(ChangeDetectorRef) private changeDetectorRef: ChangeDetectorRef) { 
     } 

     toggleSnazzyInfoWindow() { 
     this.isSnazzyInfoWindowOpened = !this.isSnazzyInfoWindowOpened; 
     } 

     /** 
     * You can omit this function if closeWhenOthersOpen and closeOnMapClick are false 
     */ 
     snazzyInfoWindowIsToggled($isOpen: boolean) { 
     console.log(`snazzyInfoWindowIsToggled ${$isOpen}`); 
     // Keep isSnazzyInfoWindowOpened up-to-date (e.g. if window was closed on map click) 
     this.isSnazzyInfoWindowOpened = $isOpen; 
     // Force detect changes. 
     // Not necessarily needed. Depends on your projet 
     // Here needed if window was closed on map click 
     this.changeDetectorRef.detectChanges(); 
     } 

Vorlage:

<agm-map [latitude]="50.523458" [longitude]="2.800024"> 
     <agm-snazzy-info-window #snazzyInfoWindow 
    [closeWhenOthersOpen]="true" 
     [closeOnMapClick]="true" 
    [isOpen]="isSnazzyInfoWindowOpened" 
    (isOpenChange)="snazzyInfoWindowIsToggled($event)" 
    [latitude]="50.523458" [longitude]="2.800024"> 
      <ng-template> 
        Hello!   
      </ng-template> 
     </agm-snazzy-info-window> 
</agm-map> 
<button (click)="toggleSnazzyInfoWindow()">Toggle SnazzyInfoWindow</button> 

Hier ist ein funktionierendes Demo: https://stackblitz.com/edit/angular-1z39nb