Angular : 라이프 사이클 후크가 컴포넌트에 사용할 수있는 입력 데이터입니다.

Angular : 라이프 사이클 후크가 컴포넌트에 사용할 수있는 입력 데이터입니다.

---

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>
...

---

Input properties are populated before ngOnInit() is called. However, this assumes the parent property that feeds the input property is already populated when the child component is created.

In your scenario, this is not the case – the images data is being populated asynchronously from a service (hence an http request). Therefore, the input property will not be populated when ngOnInit() is called.

To solve your problem, when the data is returned from the server, assign a new array to the parent property. Implement ngOnChanges() in the child. ngOnChanges() will be called when Angular change detection propagates the new array value down to the child.

참고URL : https://stackoverflow.com/questions/38020950/angular-in-which-lifecycle-hook-is-input-data-available-to-the-component