角度：在哪个生命周期挂钩中输入组件可用的数据

我有一个组件，它接收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;
}