angular - 如何在 angular-google-maps 中以编程方式打开/关闭时髦的信息窗口？

Question

如果我使用 agm-info-window ，您可以从 Controller 以编程方式调用打开/关闭

模板:

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

但如果我使用 <agm-snazzy-info-window> , open()和 close()未定义。

<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>

如何打开/关闭 <agm-snazzy-info-window>来自 Controller ？

Answer 1

您确实可以使用 isOpen 属性来动态打开/关闭 Snazzy 信息窗口。

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

模板:

<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>

这是一个工作演示:https://stackblitz.com/edit/angular-1z39nb