javascript - Angular: Hangi yaşam döngüsü kancasında giriş verileri bileşene kullanılabilir

Bir bileşenim var ve bu bileşen Input verisi olarak bir image nesneleri dizisi alıyor.

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

Bileşen yüklendiğinde selectedImage değerinin images dizisinin ilk nesnesi olarak ayarlanmasını istiyorum. Bunu OnInit yaşam döngüsü kancasına şöyle yapmayı denedim:

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

bu bana bir hata veriyor Cannot read property '0' of undefined bu, bu aşamada images değerinin ayarlanmadığı anlamına geliyor. Ayrıca OnChanges kancasını da denedim ama takıldım çünkü bir dizideki değişiklikleri nasıl gözlemleyeceğim hakkında bilgi bulamıyorum. Beklenen sonuca nasıl ulaşabilirim?

Ana bileşen şöyle görünüyor:

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

Üst bileşenin şablonu bunu içeriyor

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

Cevap #1

Girdi özellikleri ngOnInit() çağrılmadan önce doldurulur. Ancak, bu, girdi özelliğini besleyen üst özelliğin çocuk bileşen oluşturulduğunda zaten doldurulmuş olduğunu varsayar.

Senaryonuzda durum böyle değil - görüntü verileri bir hizmetten eşzamansız olarak dolduruluyor (bu nedenle bir http isteği). Bu nedenle, ngOnInit() çağrıldığında giriş özelliği doldurulmuş olmayacaktır.

Sorununuzu çözmek için, veriler sunucudan döndüğünde, ana özelliğe yeni bir dizi atayın. Çocukta ngOnChanges() öğesini uygulayın. Angular değişiklik algılama yeni dizi değerini çocuğa ilettiğinde ngOnChanges() çağrılacaktır.

Cevap #2

Değer değiştiğinde çağrılacak bir görüntü ayarlayıcısı da ekleyebilir ve varsayılan seçili görüntünüzü ayarlayıcının içinde ayarlayabilirsiniz:

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

İlgili makaleler