Wiem, że nie jestem pierwszą, która o to pyta, ale nie mogę znaleźć odpowiedzi w poprzednich pytaniach. Mam to w jednym komponencie
<div class="col-sm-5">
<laps
[lapsData]="rawLapsData"
[selectedTps]="selectedTps"
(lapsHandler)="lapsHandler($event)">
</laps>
</div>
<map
[lapsData]="rawLapsData"
class="col-sm-7">
</map>
W kontrolerze rawLapsdataulega od czasu do czasu mutacjom.
W lapsprogramie dane są wyprowadzane jako HTML w formacie tabelarycznym. To zmienia się za każdym razem rawLapsdata.
Mój mapkomponent musi być użyty ngOnChangesjako wyzwalacz do przerysowywania znaczników na Mapie Google. Problem polega na tym, że ngOnChanges nie odpala przy rawLapsDatazmianach w rodzicu. Co mogę zrobić?
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();
}
Aktualizacja: ngOnChanges nie działa, ale wygląda na to, że lapsData jest aktualizowany. W ngInit jest odbiornikiem zdarzeń dla zmian zoomu, który również wywołuje this.drawmarkers. Kiedy zmieniam zoom, rzeczywiście widzę zmianę w znacznikach. Jedynym problemem jest to, że nie otrzymuję powiadomienia w momencie zmiany danych wejściowych.
W rodzicu mam tę linię. (Przypomnij sobie, że zmiana jest odzwierciedlona w okrążeniach, ale nie na mapie).
this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);
Zauważ, że this.rawLapsDatasam jest wskaźnikiem do środka dużego obiektu json
this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;