Wykrywanie zmian Angular2: ngOnChanges nie jest uruchamiany dla zagnieżdżonego obiektu

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;

rawLapsData nadal wskazuje tę samą tablicę, nawet jeśli zmodyfikujesz zawartość tablicy (np. dodasz elementy, usuniesz elementy, zmienisz pozycję).

Podczas wykrywania zmian, gdy Angular sprawdza właściwości wejściowe komponentów pod kątem zmiany, używa (zasadniczo) ===do sprawdzania brudnego. W przypadku tablic oznacza to, że odwołania do tablic (tylko) są sprawdzane na brudno. Ponieważ rawLapsDataodwołanie do tablicy się nie zmienia, ngOnChanges()nie zostanie wywołane.

Przychodzą mi do głowy dwa możliwe rozwiązania:

1. Zaimplementuj ngDoCheck()i przeprowadź własną logikę wykrywania zmian, aby określić, czy zawartość tablicy uległa zmianie. (Dokument Lifecycle Hooks zawiera przykład ).

2. Przypisz nową tablicę do rawLapsDatakażdej zmiany zawartości tablicy. Następnie ngOnChanges()zostanie wywołana, ponieważ tablica (odniesienie) pojawi się jako zmiana.

W swojej odpowiedzi podałeś inne rozwiązanie.

Powtarzam tutaj kilka komentarzy na temat PO:

Nadal nie rozumiem, jak lapsmogę odebrać zmianę (na pewno musi używać czegoś równoważnego ngOnChanges()sobie?), Podczas gdy mapnie mogę.

• W lapskomponencie twój kod / szablon zapętla każdy wpis w lapsDatatablicy i wyświetla zawartość, więc na każdym wyświetlanym fragmencie danych istnieją powiązania kątowe.
• Nawet jeśli Angular nie wykrywa żadnych zmian we właściwościach wejściowych składnika (przy użyciu ===sprawdzania), nadal (domyślnie) po brudnym sprawdzaniu wszystkich powiązań szablonu. Kiedy któraś z tych zmian się zmieni, Angular zaktualizuje DOM. To właśnie widzisz.
• mapsKomponent prawdopodobnie nie ma żadnych powiązań w swoim szablonie do jego lapsDatawłasności wejściowego, prawda? To wyjaśniałoby różnicę.

Zauważ, że lapsDataw obu komponentach iw komponencie rawLapsDatamacierzystym wszystkie wskazują na tę samą / jedną tablicę. Więc nawet jeśli Angular nie zauważa żadnych (referencyjnych) zmian we lapsDatawłaściwościach wejściowych, komponenty „pobierają” / widzą zmiany zawartości tablicy, ponieważ wszystkie współużytkują / odwołują się do tej jednej tablicy. Nie potrzebujemy Angulara do propagowania tych zmian, tak jak w przypadku typu pierwotnego (string, number, boolean). Ale w przypadku typu prymitywnego każda zmiana wartości zawsze by się uruchomiła ngOnChanges()- co jest czymś, co wykorzystujesz w swojej odpowiedzi / rozwiązaniu.

Jak już zapewne wiesz, właściwości wejściowe obiektu zachowują się tak samo, jak właściwości wejściowe tablicy.

Nie jest to najczystsze podejście, ale możesz po prostu sklonować obiekt za każdym razem, gdy zmieniasz wartość?

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

Myślę, że wolałbym to podejście niż wdrażanie własnego, ngDoCheck()ale może ktoś taki jak @ GünterZöchbauer mógłby się wtrącić.

W przypadku tablic można to zrobić w następujący sposób:

W .tspliku (komponent nadrzędny), w którym aktualizujesz, rawLapsDatazrób to w ten sposób:

rawLapsData = somevalue; // change detection will not happen

Rozwiązanie:

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

i ngOnChangeswywoła komponent potomny

Jako rozszerzenie drugiego rozwiązania Marka Rajcoka

Przypisz nową tablicę do rawLapsData za każdym razem, gdy wprowadzisz jakiekolwiek zmiany w zawartości tablicy. Następnie zostanie wywołana ngOnChanges (), ponieważ tablica (odniesienie) pojawi się jako zmiana

możesz sklonować zawartość tablicy w następujący sposób:

rawLapsData = rawLapsData.slice(0);

Wspominam o tym, ponieważ

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

nie działa dla mnie. Mam nadzieję, że to pomoże.

Jeśli dane pochodzą z biblioteki zewnętrznej, może być konieczne uruchomienie w niej instrukcji aktualizacji danych zone.run(...). Wstrzyknij zone: NgZoneza to. Jeśli możesz już uruchomić instancję biblioteki zewnętrznej zone.run(), możesz zone.run()później nie potrzebować .

Służy ChangeDetectorRef.detectChanges()do mówienia Angularowi, aby uruchomił wykrywanie zmian podczas edycji zagnieżdżonego obiektu (którego pomija z brudnym sprawdzaniem).

Mam 2 rozwiązania, aby rozwiązać twój problem

1. Służy ngDoCheckdo wykrywania objectzmian lub niezmienionych danych
2. Przypisz objectdo nowego adresu pamięci object = Object.create(object)z komponentu nadrzędnego.

Wykrywanie zmian nie jest wyzwalane po zmianie właściwości obiektu (w tym obiektu zagnieżdżonego). Jednym z rozwiązań byłoby ponowne przypisanie nowego odniesienia do obiektu za pomocą funkcji clone () „lodash”.

import * as _ from 'lodash';

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

Moje rozwiązanie „hack” to

   <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 zmienia się w tym samym czasie co rawLapsData, co daje mapie kolejną szansę na wykrycie zmiany za pomocą prostszego typu obiektu pierwotnego. NIE jest elegancki, ale działa.

Oto hack, który właśnie wyciągnął mnie z kłopotów z tym.

A więc podobny scenariusz do OP - mam zagnieżdżony komponent Angular, który wymaga przesłania danych, ale dane wejściowe wskazują na tablicę i jak wspomniano powyżej, Angular nie widzi zmiany, ponieważ nie bada zawartość tablicy.

Aby to naprawić, konwertuję tablicę na ciąg znaków, aby Angular wykrył zmianę, a następnie w zagnieżdżonym komponencie dzielę (',') ciąg z powrotem na tablicę i znowu szczęśliwe dni.

Natknąłem się na tę samą potrzebę. Dużo czytam na ten temat, więc oto moja miedź na ten temat.

Jeśli chcesz, aby wykrywanie zmian było wykonywane przy wypychaniu, to miałbyś je mieć, gdy zmieniasz wartość obiektu w środku, prawda? I miałbyś to również, gdybyś w jakiś sposób usuwał przedmioty.

Jak już wspomniano, użycie changeDetectionStrategy.onPush

Powiedzmy, że masz ten komponent, który utworzyłeś za pomocą changeDetectionStrategy.onPush:

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

Następnie popchnąłbyś element i wywołał wykrywanie zmiany:

myCollection.push(anItem);
refresh();

lub możesz usunąć element i wywołać wykrywanie zmian:

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

albo zmienisz wartość atrybutu elementu i uruchomisz wykrywanie zmiany:

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

Treść odświeżenia:

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

Metoda slice zwraca dokładnie to samo Array, a znak [=] tworzy do niej nowe odniesienie, wyzwalając wykrywanie zmiany za każdym razem, gdy jest to potrzebne. Łatwe i czytelne :)

Pozdrowienia,

Wypróbowałem wszystkie wymienione tutaj rozwiązania, ale z jakiegoś powodu ngOnChanges()nadal nie odpaliłem. Więc zadzwoniłem z this.ngOnChanges()po wywołaniu usługi, która ponownie zapełnia moje tablice i zadziałało ... prawda? prawdopodobnie nie. Schludny? cholera nie. Pracuje? tak!

ok, więc moim rozwiązaniem było:

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

I to wyzwala mnie ngOnChanges

Musiałem stworzyć do tego hack -

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

W moim przypadku były to zmiany wartości obiektu, których ngOnChangenie przechwytywano. Kilka wartości obiektów jest modyfikowanych w odpowiedzi na wywołanie interfejsu API. Ponowne ngOnChangezainicjowanie obiektu rozwiązało problem i spowodowało wyzwolenie elementu podrzędnego.

Coś jak

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

Kiedy manipulujesz danymi, takimi jak:

this.data.profiles[i].icon.url = '';

Następnie powinieneś użyć, aby wykryć zmiany:

let array = this.data.profiles.map(x => Object.assign({}, x)); // It will detect changes

Ponieważ kątowe ngOnchanges nie są w stanie wykryć zmian w szyku, obiektach, musimy przypisać nowe odniesienie. Działa za każdym razem!