Angular: Trong đó vòng đời hook là dữ liệu đầu vào có sẵn cho Thành phần

Question 1

Tôi có một thành phần nhận một mảng các imageđối tượng dưới dạng Inputdữ liệu.

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

Tôi muốn khi thành phần tải selectedImagegiá trị được đặt thành đối tượng đầu tiên của imagesmảng. Tôi đã cố gắng làm điều này trong OnInitmóc vòng đời như thế này:

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

điều này mang lại cho tôi một lỗi Cannot read property '0' of undefinedcó nghĩa là imagesgiá trị không được đặt trong giai đoạn này. Tôi cũng đã thử OnChangeshook nhưng tôi bị mắc kẹt vì tôi không thể lấy thông tin về cách quan sát các thay đổi của một mảng. Làm thế nào tôi có thể đạt được kết quả mong đợi?

Thành phần mẹ trông giống như sau:

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

Mẫu của thành phần mẹ có cái này

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

Question 2

Thuộc tính đầu vào được điền trước khi ngOnInit()được gọi. Tuy nhiên, điều này giả sử thuộc tính mẹ cung cấp thuộc tính đầu vào đã được điền khi thành phần con được tạo.

Trong trường hợp của bạn, đây không phải là trường hợp - dữ liệu hình ảnh đang được điền không đồng bộ từ một dịch vụ (do đó là một yêu cầu http). Do đó, thuộc tính đầu vào sẽ không được điền khi ngOnInit()được gọi.

Để giải quyết vấn đề của bạn, khi dữ liệu được trả về từ máy chủ, hãy gán một mảng mới cho thuộc tính mẹ. Thực hiện ngOnChanges()ở trẻ. ngOnChanges()sẽ được gọi khi phát hiện thay đổi Angular truyền giá trị mảng mới xuống con.

Question 3

Bạn cũng có thể thêm bộ định vị cho hình ảnh của mình, bộ định vị này sẽ được gọi bất cứ khi nào giá trị thay đổi và bạn có thể đặt bộ định vị mặc định trong chính bộ định vị:

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