我无法弄清楚为什么运行changeEnt()
方法会执行ngOnChanges,而单击GoogleMaps标记却不会执行ngOnChanges。
这是我的父组件
@Component({
selector: 'app-wl-map',
templateUrl: './wl-map.component.html',
styleUrls: ['./wl-map.component.scss']
})
export class WlMapComponent extends BaseComponentComponent implements OnInit {
@Input() entResList: Enterprise[];
@ViewChild('gmap') gmapElement: any;
coords: Coordinates;
map: google.maps.Map;
selectedEnt: Enterprise = new Enterprise();
/**
*
* @type {any[]}
*/
conts = [];
constructor(private router: Router) {
super();
}
ngOnInit() {
this.requestLocation();
}
/**
*
*/
requestLocation(): void {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
// this.initMap(position.coords);
this.coords = position.coords;
});
} else {
alert("Geolocation is not supported by this browser.");
}
}
/**
* init map
*/
initMap(): void {
let lat = this.coords ? this.coords.latitude : DEFAULT_COORDS.latitude;
let lng = this.coords ? this.coords.longitude : DEFAULT_COORDS.longitude;
var mapProp = {
center: new google.maps.LatLng(lat, lng),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
this.placeMarers();
}
/**
* position marker
*/
placeMarers(): void {
if (this.entResList) {
var markers: google.maps.Marker[] = this.entResList.map(function (ent: Enterprise, i) {
if (ent.locationList.length > 0) {
let mark = new google.maps.Marker({
position: new google.maps.LatLng(ent.locationList[0].latitudine, ent.locationList[0].longitudine),
label: this.getMarkerLabel(ent)
});
google.maps.event.addListener(mark, 'click', this.markerClickHandler.bind(this, ent));
return mark;
}
}.bind(this));
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(this.map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
}
/**
* invoked on marker click
* @param {Enterprise} ent
*/
markerClickHandler(ent: Enterprise): void {
if (ent) {
this.selectedEnt = new Enterprise();
}
}
changeEnt() {
setTimeout(function () {
this.selectedEnt = new Enterprise();
console.log('this button handler', this);
}.bind(this), 1000)
}
}
这是我的父组件模板
<button mat-raised-button color="primary" (click)="initMap()">Init Map</button><br/><br/>
<div class="map-container">
<app-wl-map-popup-enterprise [ent]="selectedEnt"></app-wl-map-popup-enterprise>
<div id="google-map" #gmap style="width:100%; height:400px"></div>
<button (click)="changeEnt()">Change ENt</button>
</div>
这是我的子组件
@Component({
selector: 'app-wl-map-popup-enterprise',
templateUrl: './wl-map-popup-enterprise.component.html',
styleUrls: ['./wl-map-popup-enterprise.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class WlMapPopupEnterpriseComponent extends BaseComponentComponent implements OnInit, OnChanges {
@Input() ent: Enterprise;
constructor() {
super();
}
ngOnInit() {
console.log('init', this.ent);
console.log('globals', this.globals);
}
ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
console.log('**************************** changes', changes)
}
}
如果我加载地图并单击标记markerClickHandler()
,则会执行此操作,但不会拦截更改。
否则,如果我单击html按钮Change ENt
并执行changeEnt()
,则会拦截更改。
我引入了超时方法,以检查问题是否是由于上下文的变化引起的,但似乎不是