Angular: dans lequel le cycle de vie correspond aux données d’entrée disponibles pour le composant

Question

J'ai un composant qui reçoit un tableau d' image objets en tant que Input données.

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

Je voudrais que lorsque la composante des charges de l' selectedImage de la valeur définie pour le premier objet de l' images tableau. J'ai essayé de le faire dans l' OnInit cycle de vie du crochet comme ceci:

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

cela me donne une erreur Cannot read property '0' of undefined ce qui signifie que l' images de la valeur n'est pas définie à ce stade. J'ai aussi essayé de l' OnChanges crochet, mais je suis bloqué car je ne peux pas obtenir des informations sur la manière d'observer les changements d'un tableau. Comment puis-je obtenir le résultat attendu?

Le composant parent ressemble à ceci:

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

Le parent du composant de modèle a cette

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

Answer 1

Propriétés d'entrée sont remplies avant d' ngOnInit() est appelé. Toutefois, cela suppose que la propriété parent qui alimente l'entrée de la propriété est déjà remplie lorsque l'enfant composant est créé.

Dans votre scénario, ce n'est pas le cas, les données d'images est d'être rempli de manière asynchrone à partir d'un service (d'où une requête http). Par conséquent, l'entrée de la propriété ne sera pas remplie lors de l' ngOnInit() est appelé.

Pour résoudre votre problème, lorsque les données renvoyées par le serveur, d'attribuer un nouveau tableau à la propriété parent. Mettre en oeuvre ngOnChanges() chez l'enfant. ngOnChanges() sera appelée lorsque Angulaire de la détection de changement se propage le nouveau tableau de la valeur vers le bas pour l'enfant.