diff --git a/src/app/demo/examples/popup-on-click.component.ts b/src/app/demo/examples/popup-on-click.component.ts
index 2e3934811..8d79bb393 100644
--- a/src/app/demo/examples/popup-on-click.component.ts
+++ b/src/app/demo/examples/popup-on-click.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectorRef } from '@angular/core';
+import { Component } from '@angular/core';
import { MapMouseEvent } from 'mapbox-gl';
@Component({
@@ -28,7 +28,6 @@ import { MapMouseEvent } from 'mapbox-gl';
@@ -41,9 +40,7 @@ export class PopupOnClickComponent {
selectedPoint: GeoJSON.Feature | null;
cursorStyle: string;
- constructor(
- private ChangeDetectorRef: ChangeDetectorRef
- ) {
+ constructor() {
this.points = {
'type': 'FeatureCollection',
'features': [{
@@ -150,8 +147,6 @@ export class PopupOnClickComponent {
}
onClick(evt: MapMouseEvent) {
- this.selectedPoint = null;
- this.ChangeDetectorRef.detectChanges();
this.selectedPoint = (evt).features[0];
}
}
diff --git a/src/app/lib/popup/popup.component.ts b/src/app/lib/popup/popup.component.ts
index 7d3e8b6d7..36698ba6d 100644
--- a/src/app/lib/popup/popup.component.ts
+++ b/src/app/lib/popup/popup.component.ts
@@ -50,7 +50,10 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
ngOnChanges(changes: SimpleChanges) {
if (changes.lngLat && !changes.lngLat.isFirstChange()) {
- this.popupInstance!.setLngLat(this.lngLat!);
+ this.MapService.removePopup(this.popupInstance!);
+ const popupInstanceTmp = this.createPopup();
+ this.MapService.addPopup(popupInstanceTmp);
+ this.popupInstance = popupInstanceTmp;
}
if (changes.marker && !changes.marker.isFirstChange()) {
const previousMarker: MarkerComponent = changes.marker.previousValue;
@@ -64,6 +67,15 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
}
ngAfterViewInit() {
+ this.popupInstance = this.createPopup();
+ }
+
+ ngOnDestroy() {
+ this.MapService.removePopup(this.popupInstance!);
+ this.popupInstance = undefined;
+ }
+
+ private createPopup() {
const options = {
closeButton: this.closeButton,
closeOnClick: this.closeOnClick,
@@ -73,23 +85,19 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
Object.keys(options)
.forEach((key) =>
(options)[key] === undefined && delete (options)[key]);
- this.popupInstance = new Popup(options);
- this.popupInstance.once('close', () => {
+ const popupInstance = new Popup(options);
+ popupInstance.once('close', () => {
this.close.emit();
});
- this.popupInstance.setDOMContent(this.content.nativeElement);
+ popupInstance.setDOMContent(this.content.nativeElement);
this.MapService.mapCreated$.subscribe(() => {
if (this.lngLat) {
- this.popupInstance!.setLngLat(this.lngLat);
- this.MapService.addPopup(this.popupInstance!);
+ popupInstance.setLngLat(this.lngLat);
+ this.MapService.addPopup(popupInstance);
} else if (this.marker && this.marker.markerInstance) {
- this.marker.markerInstance.setPopup(this.popupInstance);
+ this.marker.markerInstance.setPopup(popupInstance);
}
});
- }
-
- ngOnDestroy() {
- this.MapService.removePopup(this.popupInstance!);
- this.popupInstance = undefined;
+ return popupInstance;
}
}