Угловой: в котором ловушка жизненного цикла является входными данными, доступными Компоненту.

У меня есть компонент, который получает массив 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()вызова. Однако при этом предполагается, что родительское свойство, которое передает свойство input, уже заполнено при создании дочернего компонента.

В вашем сценарии это не так - данные изображений заполняются асинхронно из службы (следовательно, 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];
      }
  }

 }