Angular2 değişiklik tespiti: ngOnChanges, yuvalanmış nesne için ateşlemiyor

Bunu ilk soran ben olmadığımı biliyorum, ancak önceki sorularda bir cevap bulamıyorum. Bunu tek bileşenim var

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

Denetleyicide rawLapsdatazaman zaman mutasyona uğrar.

İçinde laps, veriler tablo biçiminde HTML olarak çıkarılır. Bu her rawLapsdatadeğiştiğinde değişir.

Benim mapbileşen ihtiyaçları kullanmak ngOnChangesbir Google Haritası üzerinde işaretleri yeniden çizmek için bir tetikleyici olarak. Sorun, ebeveynde rawLapsDatadeğişiklik olduğunda ngOnChanges'ın tetiklenmemesidir . Ne yapabilirim?

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();
    }

Güncelleme: ngOnChanges çalışmıyor, ancak lapsData güncelleniyor gibi görünüyor. NgInit'te, aynı zamanda çağıran yakınlaştırma değişiklikleri için bir olay dinleyicisi vardır this.drawmarkers. Yakınlaştırmayı değiştirdiğimde, işaretçilerde gerçekten bir değişiklik görüyorum. Yani tek sorun, giriş verileri değiştiğinde bildirim almamam.

Ebeveynde bu satır var. (Değişikliğin turlara yansıdığını ancak haritaya yansıtılmadığını hatırlayın).

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

Ve bunun this.rawLapsDatakendisi büyük bir json nesnesinin ortasına bir işaretçi olduğunu unutmayın.

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

rawLapsData dizinin içeriğini değiştirseniz bile aynı diziyi göstermeye devam eder (örneğin, öğe ekleme, öğe kaldırma, bir öğeyi değiştirme).

Değişiklik tespiti sırasında, Angular bileşenlerin girdi özelliklerini değişiklik için kontrol ettiğinde, ===kirli kontrol için (esasen) kullanır . Diziler için bu, dizi referanslarının (yalnızca) kirli olarak kontrol edildiği anlamına gelir. Bu yana rawLapsDatabir dizi referans değişmemektedir, ngOnChanges()çağrılmayacaktır.

İki olası çözüm düşünebilirim:

1. ngDoCheck()Dizi içeriklerinin değişip değişmediğini belirlemek için kendi değişiklik algılama mantığınızı uygulayın ve gerçekleştirin. (Yaşam Döngüsü Kancaları belgesinde bir örnek vardır .)

2. rawLapsDataDizi içeriğinde herhangi bir değişiklik yaptığınızda yeni bir dizi atayın . Ardından ngOnChanges(), dizi (başvuru) bir değişiklik olarak görüneceği için çağrılacaktır.

Cevabınızda başka bir çözüm buldunuz.

Burada OP ile ilgili bazı yorumları tekrarlamak:

Hâlâ lapsdeğişimi nasıl anlayabileceğimi (kesinlikle ngOnChanges()kendine eşdeğer bir şey kullanıyor olmalı ?) Göremiyorum map.

• Gelen lapsbileşen kodu / şablon her giriş üzerinde döngüler lapsDatadizisi ve görüntüler içerikleri, bu nedenle görüntülenen her veri parçası üzerinde Açısal bağlamaları vardır.
• Angular, bir bileşenin girdi özelliklerinde herhangi bir değişiklik algılamadığında ( ===denetimi kullanarak ), yine de (varsayılan olarak) kirli tüm şablon bağlamalarını denetler. Bunlardan herhangi biri değiştiğinde, Angular DOM'u güncelleyecektir. Gördüğün bu.
• mapsBileşen olasılıkla onun kendi şablonuna herhangi bağlamaları yoktur lapsDatagiriş mülkiyet, değil mi? Bu farkı açıklar.

Not bu lapsDataher iki bileşenin ve rawLapsDataaynı / bir diziye bütün alanına ana bileşeni. Dolayısıyla, Angular lapsDatagirdi özelliklerinde herhangi bir (referans) değişiklik fark etmese de , bileşenler herhangi bir dizi içeriğini "alır" / görürler çünkü hepsi bir diziyi paylaşır / referans verir. İlkel bir türle (dizge, sayı, mantıksal) yapacağımız gibi, bu değişiklikleri yaymak için Angular'a ihtiyacımız yok. Ancak ilkel bir türle, değerdeki herhangi bir değişiklik her zaman tetiklenir ngOnChanges()- ki bu, cevabınızda / çözümünüzde kullandığınız bir şeydir.

Muhtemelen şimdiye kadar anladığınız gibi, nesne girdi özellikleri, dizi girdi özellikleriyle aynı davranışa sahiptir.

En temiz yaklaşım değil, ancak değeri her değiştirdiğinizde nesneyi klonlayabilirsiniz.

   rawLapsData = Object.assign({}, rawLapsData);

Sanırım bu yaklaşımı kendi yaklaşımınızı uygulamaya tercih ederim ngDoCheck()ama belki @ GünterZöchbauer gibi biri devreye girebilir.

Case of Arrays'de bunu şu şekilde yapabilirsiniz:

Gelen .tsdosya (Veli bileşeni) nereye güncelliyoruz rawLapsDataböyle yapmak:

rawLapsData = somevalue; // change detection will not happen

Çözüm:

rawLapsData = {...somevalue}; //change detection will happen

ve ngOnChangesalt bileşende çağrılacak

Mark Rajcok'un ikinci çözümünün bir uzantısı olarak

Dizi içeriğinde herhangi bir değişiklik yaptığınızda rawLapsData'ya yeni bir dizi atayın. Daha sonra ngOnChanges () çağrılacaktır çünkü dizi (başvuru) bir değişiklik olarak görünecektir

Dizinin içeriğini şu şekilde klonlayabilirsiniz:

rawLapsData = rawLapsData.slice(0);

Bundan bahsediyorum çünkü

rawLapsData = Object.assign ({}, rawLapsData);

benim için çalışmadı. Umarım bu yardımcı olur.

Veriler harici bir kitaplıktan geliyorsa, içindeki data upate deyimini çalıştırmanız gerekebilir zone.run(...). Bunun için enjekte edin zone: NgZone. Harici kitaplığın somutlaştırılmasını zone.run()zaten çalıştırabiliyorsanız, daha sonra ihtiyacınız olmayabilir zone.run().

ChangeDetectorRef.detectChanges()Angular'a, yuvalanmış bir nesneyi düzenlediğinizde (kirli denetimiyle gözden kaçırdığı) bir değişiklik algılaması çalıştırmasını söylemek için kullanın .

Sorununuzu çözmek için 2 çözümüm var

1. Değiştirilen veya değiştirilmeyen verileri ngDoChecktespit etmek için kullanınobject
2. Ana bileşenden objectyeni bir bellek adresine atayın object = Object.create(object).

Benim 'hack' çözümüm

   <div class="col-sm-5">
        <laps
            [lapsData]="rawLapsData"
            [selectedTps]="selectedTps"
            (lapsHandler)="lapsHandler($event)">
        </laps>
    </div>
    <map
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"   // <--------
        class="col-sm-7">
    </map>

selectedTps, rawLapsData ile aynı anda değişir ve bu, haritaya, değişikliği daha basit bir nesne ilkel türü aracılığıyla algılama şansı verir . Zarif DEĞİL, ama işe yarıyor.

Bir nesnenin bir özelliğini değiştirdiğinizde (iç içe geçmiş nesne dahil) değişiklik algılaması tetiklenmez. Çözümlerden biri, 'lodash' clone () işlevini kullanarak yeni bir nesne referansını yeniden atamak olabilir.

import * as _ from 'lodash';

this.foo = _.clone(this.foo);

İşte beni bununla beladan kurtaran bir hack.

Öyleyse, OP'ye benzer bir senaryo - Kendisine aktarılan veriye ihtiyaç duyan iç içe geçmiş bir Açısal bileşenim var, ancak girdi bir diziyi gösteriyor ve yukarıda belirtildiği gibi, Angular bir değişiklik görmüyor çünkü dizinin içeriği.

Bu yüzden düzeltmek için diziyi Angular'ın bir değişikliği algılaması için bir dizgeye dönüştürüyorum ve ardından iç içe geçmiş bileşende dizeyi tekrar bir diziye ve mutlu günlerine ayırıyorum (',').

Ben de aynı ihtiyaca rastladım. Ve ben bununla ilgili çok şey okudum, işte konuyla ilgili makalem.

İtmede değişiklik algılamanızı istiyorsanız, içindeki bir nesnenin değerini değiştirdiğinizde buna sahip olursunuz değil mi? Ve bir şekilde nesneleri kaldırsanız da buna sahip olursunuz.

Daha önce de belirtildiği gibi, changeDetectionStrategy.onPush kullanımı

ChangeDetectionStrategy.onPush ile yaptığınız bu bileşene sahip olduğunuzu varsayalım:

<component [collection]="myCollection"></component>

Ardından bir öğeyi itip değişiklik algılamasını tetiklersiniz:

myCollection.push(anItem);
refresh();

veya bir öğeyi kaldırıp değişiklik algılamasını tetiklersiniz:

myCollection.splice(0,1);
refresh();

veya bir öğe için öznitelik değerini değiştirir ve değişiklik algılamasını tetiklersiniz:

myCollection[5].attribute = 'new value';
refresh();

Yenileme içeriği:

refresh() : void {
    this.myCollection = this.myCollection.slice();
}

Dilim yöntemi tam olarak aynı Diziyi döndürür ve [=] işareti ona yeni bir referans oluşturarak her ihtiyacınız olduğunda değişiklik algılamasını tetikler. Kolay ve okunabilir :)

Saygılarımızla,

Burada belirtilen tüm çözümleri denedim, ancak nedense ngOnChanges()hala benim için ateş etmedim. Bu yüzden bunu denilen this.ngOnChanges()doğru .... benim diziler yeniden doldurur hizmeti çağırdıktan sonra ve işe yaradı? muhtemelen değil. Neat? asla. İşler? Evet!

tamam, bu yüzden bunun için çözümüm şuydu:

this.arrayWeNeed.DoWhatWeNeedWithThisArray();
const tempArray = [...arrayWeNeed];
this.arrayWeNeed = [];
this.arrayWeNeed = tempArray;

Ve bu beni değişimleri tetikliyor

Bunun için bir hack oluşturmam gerekiyordu -

I created a Boolean Input variable and toggled it whenever array changed, which triggered change detection in the child component, hence achieving the purpose

Benim durumumda ngOnChange, yakalamadığı nesne değerindeki değişikliklerdi . API çağrısına yanıt olarak birkaç nesne değeri değiştirilir. Nesneyi yeniden başlatmak sorunu çözdü vengOnChange alt bileşende tetiklenmesine .

Gibi bir şey

 this.pagingObj = new Paging(); //This line did the magic
 this.pagingObj.pageNumber = response.PageNumber;