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). Отже, властивість input не буде заповнено при ngOnInit()виклику.

Щоб вирішити вашу проблему, коли дані повертаються із сервера, призначте новий масив батьківській властивості. Впровадити ngOnChanges()в дитину. ngOnChanges()буде викликано, коли Angular виявлення змін поширює нове значення масиву до нащадка.

Ви також можете додати сеттер для ваших зображень, який буде викликатися, коли значення змінюється, і ви можете встановити вибране за замовчуванням зображення в самому сеттері:

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

Ви можете вирішити це, просто змінивши кілька речей.

  export class ImageGalleryComponent implements OnInit {

  @Input() images: Image[];
  selectedImage: Image;

  ngOnChanges() {
      if(this.images) {
        this.selectedImage = this.images[0];
      }
  }

 }