Tôi biết tôi không phải là người đầu tiên hỏi về điều này, nhưng tôi không thể tìm thấy câu trả lời trong các câu hỏi trước. Tôi có cái này trong một thành phần
<div class="col-sm-5">
<laps
[lapsData]="rawLapsData"
[selectedTps]="selectedTps"
(lapsHandler)="lapsHandler($event)">
</laps>
</div>
<map
[lapsData]="rawLapsData"
class="col-sm-7">
</map>
Trong bộ điều khiển rawLapsdatađược đột biến theo thời gian.
Trong laps, dữ liệu được xuất dưới dạng HTML ở dạng bảng. Điều này thay đổi bất cứ khi nào rawLapsdatathay đổi.
mapThành phần của tôi cần sử dụng ngOnChangeslàm công cụ kích hoạt để vẽ lại các điểm đánh dấu trên Google Map. Vấn đề là ngOnChanges không kích hoạt khi rawLapsDatathay đổi cha mẹ. Tôi có thể làm gì?
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();
}
Cập nhật: ngOnChanges không hoạt động, nhưng có vẻ như lapsData đang được cập nhật. Trong ngInit là một trình lắng nghe sự kiện để thay đổi phóng to cũng gọi this.drawmarkers. Khi tôi thay đổi thu phóng, tôi thực sự thấy một sự thay đổi trong các điểm đánh dấu. Vì vậy, vấn đề duy nhất là tôi không nhận được thông báo tại thời điểm dữ liệu đầu vào thay đổi.
Trong cha mẹ, tôi có dòng này. (Hãy nhớ lại rằng sự thay đổi được phản ánh trong vòng, nhưng không phải trong bản đồ).
this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);
Và lưu ý rằng this.rawLapsDatachính nó là một con trỏ đến giữa một đối tượng json lớn
this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;
zone.run(...)nên làm điều đó sau đó.
ngOnChanges()sẽ không được gọi. Bạn có thể sử dụng ngDoCheck()và thực hiện logic của riêng mình để xác định xem nội dung mảng có thay đổi hay không. lapsDatađược cập nhật vì nó có / là một tham chiếu đến cùng một mảng với rawLapsData.