如果我使用agm-info-window
,您可以从控制器以编程方式调用open / close
模板:
<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>
控制器:
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>
?
您确实可以使用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>
当您使用infoWindow.open()无法在agm / snazzy-in-window中工作时,请尝试此操作
<agm-map>
<agm-marker
(mouseOver)="onMouseOver(infoWindow, $event)"
(mouseOut)="onMouseOut(infoWindow, $event)">
<agm-snazzy-info-window
[closeWhenOthersOpen]="true"
[panOnOpen]="false"
[placement]="'bottom'" #infoWindow>
<ng-template>
<h6 class="mb-0">this is marker</h6>
</ng-template>
</agm-snazzy-info-window>
</agm-marker>
</agm-map>
component.ts
onMouseOver(infoWindow, $event: MouseEvent) {
infoWindow._openInfoWindow();
}
onMouseOut(infoWindow, $event: MouseEvent) {
infoWindow._closeInfoWindow();
}