Angular：どのライフサイクルフックがコンポーネントで利用可能な入力データであるか

imageオブジェクトの配列をInputデータとして受け取るコンポーネントがあります。

export class ImageGalleryComponent {
  @Input() images: Image[];
  selectedImage: Image;
}

コンポーネントがロードされるときに、selectedImage値がimages配列の最初のオブジェクトに設定されるようにしたいと思います。私は次のOnInitようなライフサイクルフックでこれを実行しようとしました：

export class ImageGalleryComponent implements OnInit {
  @Input() images: Image[];
  selectedImage: Image;
  ngOnInit() {
    this.selectedImage = this.images[0];
  }
}

これによりエラーが発生します。Cannot read property '0' of undefinedこれは、imagesこのステージで値が設定されていないことを意味します。OnChangesフックも試しましたが、配列の変化を観察する方法がわからないので行き詰まりました。どうすれば期待した結果を達成できますか？

親コンポーネントは次のようになります。

@Component({
  selector: 'profile-detail',
  templateUrl: '...',
  styleUrls: [...],
  directives: [ImageGalleryComponent]
})

export class ProfileDetailComponent implements OnInit {
  profile: Profile;
  errorMessage: string;
  images: Image[];
  constructor(private profileService: ProfileService, private   routeParams: RouteParams){}

  ngOnInit() {
    this.getProfile();
  }

  getProfile() {
    let profileId = this.routeParams.get('id');
    this.profileService.getProfile(profileId).subscribe(
    profile => {
     this.profile = profile;
     this.images = profile.images;
     for (var album of profile.albums) {
       this.images = this.images.concat(album.images);
     }
    }, error => this.errorMessage = <any>error
   );
 }
}

親コンポーネントのテンプレートにはこれがあります

...
<image-gallery [images]="images"></image-gallery>
...

入力プロパティは、ngOnInit()が呼び出される前に入力されます。ただし、これは、子コンポーネントの作成時に、入力プロパティをフィードする親プロパティがすでに入力されていることを前提としています。

あなたのシナリオでは、これは当てはまりません–画像データはサービスから非同期に入力されています（したがってhttpリクエスト）。したがって、ngOnInit()が呼び出されたときにinputプロパティは設定されません。

問題を解決するには、サーバーからデータが返されるときに、親プロパティに新しい配列を割り当てます。ngOnChanges()子に実装します。 ngOnChanges()角度変化検出が新しい配列値を子に伝播するときに呼び出されます。

また、値が変更されるたびに呼び出される画像のセッターを追加したり、デフォルトで選択した画像をセッター自体に設定したりすることもできます。

export class ImageGalleryComponent {
  private _images: Image[];

  @Input()
  set images(value: Image[]) {
      if (value) { //null check
          this._images = value;
          this.selectedImage = value[0]; //setting default selected image
      }
  }
  get images(): Image[] {
      return this._images;
  }

  selectedImage: Image;
}