我知道我不是第一个问这个问题的人,但我在之前的问题中找不到答案.我把这个放在一个组件里
<div class="col-sm-5">
<laps
[lapsData]="rawLapsData"
[selectedTps]="selectedTps"
(lapsHandler)="lapsHandler($event)">
</laps>
</div>
<map
[lapsData]="rawLapsData"
class="col-sm-7">
</map>
在控制器中,rawLapsdata
不时发生变异.
在laps
中,数据以表格格式输出为HTML
.每当rawLapsdata
改变时,这种情况就会改变.
我的map
组件需要使用ngOnChanges
作为触发器在谷歌 map 上重新绘制标记.问题是,当rawLapsData
在父对象中发生变化时,ngOnChanges
不会触发.我能做什么?
import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';
@Component({
selector: 'map',
templateUrl: './components/edMap/edMap.html',
styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
@Input() lapsData: any;
map: google.maps.Map;
ngOnInit() {
...
}
ngOnChanges(changes: { [propName: string]: SimpleChange }) {
console.log('ngOnChanges = ', changes['lapsData']);
if (this.map) this.drawMarkers();
}
Update: ngOnChanges
不工作,但看起来lapsData
正在更新.ngOnInit
中有一个用于zoom 更改的事件侦听器,它也调用this.drawmarkers
.当我改变zoom 时,我确实看到了标记的变化.所以唯一的问题是,在输入数据更改时,我没有收到通知.
在家长中,我有这样一行.(回想一下,这种变化反映在圈数上,而不是map
圈).
this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);
请注意,this.rawLapsData
本身就是一个指向大型json对象中间的指针
this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;