如果我使用 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 ?
最佳答案
您确实可以使用 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>
关于angular - 如何在 angular-google-maps 中以编程方式打开/关闭时髦的信息窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47508697/