Angular2変化の検出：ngOnChangesがネストされたオブジェクトに対して発砲しない

Question

私はこれについて最初に質問するのではないことを知っていますが、これまでの質問では答えが見つかりません。私はこれを1つのコンポーネントで持っています

コントローラでは、rawLapsdataは時々突然変更されます。

lapsには、データが表形式でHTMLとして出力されます。 rawLapsdataが変更されるたびに変更されます。

私のmapコンポーネントは、ngOnChangesをGoogleマップのマーカーを再描画するためのトリガーとして使用する必要があります。問題は、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(); 
    } 

更新： ngOnChangesが動作していないが、lapsDataが更新されているかのように見えます。 ngInitは、ズーム変更のイベントリスナで、this.drawmarkersも呼び出します。ズームを変更すると、実際にマーカーの変化が表示されます。したがって、唯一の問題は、入力データが変更された時点で通知を受け取らないことです。

親では、私はこの行を持っています。 （変更はラップに反映されますが、マップには反映されません）。

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

とデータはあなたがzone.run(...)内のデータupateステートメントを実行する必要があります外部ライブラリから来る場合this.rawLapsDataが大きいJSONオブジェクト

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

Answer 1

rawLapsDataは、配列の内容を変更しても（アイテムの追加、アイテムの削除、アイテムの変更など）、引き続き同じ配列を参照し続けます。

変更検出時に、Angularがコンポーネントの入力プロパティの変更をチェックすると、ダーティチェックに（本質的に）===が使用されます。配列の場合、これは配列参照（のみ）がダーティチェックされていることを意味します。 rawLapsData配列参照が変更されていないため、ngOnChanges()は呼び出されません。私は2つの可能な解決策の

を考えることができます：

1. がngDoCheck()を実装し、配列の内容が変更されているかどうかを判断するために、独自の変化検出ロジックを実行します。 （ライフサイクルフックの文書はan exampleです。）

2. アレイの内容を変更するたびに、rawLapsDataに新しいアレイを割り当てます。配列（参照）が変更として表示されるため、ngOnChanges()が呼び出されます。

あなたの答えでは、別の解決策が思い浮かびました。

OPにここにいくつかのコメントを繰り返す：

私はまだlapsが変更に拾うことができますどのように表示されていないmapはできませんが（確かにそれはngOnChanges()自身と同等のものを使用する必要があります？） 。 laps成分で

• コード/テンプレートがlapsDataアレイ内の各エントリをループ、およびコンテンツを表示するので、表示されているデータの各部分に角度バインディングがあります。
• 角度は、コンポーネントの入力プロパティの変更を検出しないとしても
、それはまだテンプレートバインディングのすべてのダーティチェック（デフォルト）（ ===チェックを使用して）。これらのいずれかが変更されると、AngularはDOMを更新します。それはあなたが見ているものです。
• mapsコンポーネントのテンプレートに入力プロパティのlapsDataのバインディングが存在しない可能性があります。それは違いを説明するでしょう。

親コンポーネントのと親コンポーネントのrawLapsDataは、すべて同じ/ 1つの配列を指していることに注意してください。したがって、AngularはlapsData入力プロパティの変更（参照）に気づいていませんが、コンポーネントはすべて1つの配列を共有/参照しているため、配列の内容が変化したり参照したりします。プリミティブ型（string、number、boolean）のように、Angularがこれらの変更を伝播する必要はありません。しかし、プリミティブ型では、値を変更すると常に答え/ソリューションで悪用するものがngOnChanges() –になります。

オブジェクトの入力プロパティは、配列入力プロパティと同じ動作をしている可能性があります。

Answer 2

の真ん中へのポインタそのものであることに注意してください。これにはzone: NgZoneを注入します。外部ライブラリのインスタンス化をzone.run()内ですでに実行できる場合は、後でzone.run()を必要としない可能性があります。

Answer 3

私の「ハック」ソリューションはrawLapsDataと同時に

<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の変化であり、それは単純 オブジェクト プリミティブ型による変化を検出する別の機会をマッピングできます。エレガントではありませんが、機能します。

Answer 4

ここでは、ちょうどこの問題で私を困惑させたハックです。

OPと同様のシナリオでは、データを渡す必要があるネストされたAngularコンポーネントがありますが、入力が配列を指し示しています。前述のように、Angularでは変更が表示されません配列の内容は調べません。

これを修正するために、配列をAngularの文字列に変換して変更を検出し、次に入れ子になったコンポーネントで配列を再配置して幸せな日に戻します。

Answer 5

使用ChangeDetectorRef.detectChanges()あなたがネストされたオブジェクトを（それはそのダーティチェックでミスという）を編集したときに、変化検出を実行するために角度指示します。

Answer 6

ないクリーンなアプローチ、あなただけのオブジェクトに値を変更するたびに複製することができますか？

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

私は、@GünterZöchbauerようなあなたngDoCheck()自身が、おそらく誰かがチャイムができ実装する上で、このアプローチを好むだろうと思います。

Answer 7

マークRajcokの第二の溶液に延長

として新しいの割り当て配列の内容を に変更するたびに、配列をrawLapsDataに設定します。

rawLapsData = rawLapsData.slice(0); 

ため

私はこれを言及しています：配列 （参照）が変更

としてあなたは、このような配列の内容のクローンを作成することができます表示されますので、その後ngOnChanges（）が呼び出されます

rawLapsData = Object.assign（{}、rawLapsData）;

は私にとっては機能しませんでした。私はこれが役立つことを願っています