Açısal: Hangi yaşam döngüsü kancası Bileşen

Question

için kullanılabilir giriş verisi var nesnesi Input veri olarak bir dizi alan bir bileşen var.

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

bileşen selectedImage değeri images dizinin ilk nesneye ayarlanmış olması yükler zaman istiyoruz. Böyle OnInit yaşam döngüsü kanca bunu çalıştık:

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

bu bana bu sahnede ayarlanmamış images değer anlamına gelir bir hata Cannot read property '0' of undefined verir. Ayrıca OnChanges kancasını da denedim ama takılıyorum çünkü bir dizinin değişikliklerini gözlemleme hakkında bilgi alamıyorum. Beklenen sonucu nasıl elde edebilirim?

ebeveyn bileşeni aşağıdaki gibi görünür:

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

ebeveyn bileşenin şablon ngOnInit() çağrılmadan önce bu

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

Answer 1

Girdi özellikleri doldurulur vardır. Ancak, bu, alt bileşen oluşturulduğunda girdi özelliğini besleyen üst özellik zaten doldurulmuş varsayılmaktadır. Senaryoda, görüntü verilerinin bir hizmetten (örneğin bir http isteği) eşzamansız olarak yerleştirildiği – durumundaki bu durum geçerli değildir. Bu nedenle, ngOnInit() çağrıldığında giriş özelliği doldurulmayacaktır.

Sorununuzu çözmek için, veriler sunucudan döndüğünde, üst özelliğe yeni bir dizi atayın. Çocuğa ngOnChanges() uygulayın. Açısal değişiklik algılaması, yeni dizi değerini çocuğa doğru yaydığında ngOnChanges() çağrılır.