각도:라이프사이클 후크가 구성 요소에서 사용할 수 있는 데이터를 입력하는 경우

각도:라이프사이클 후크가 구성 요소에서 사용할 수 있는 데이터를 입력하는 경우

다음의 배열을 수신하는 구성 요소가 있습니다.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>
...

입력 속성은 다음 이전에 채워집니다.ngOnInit()이 호출됩니다.그러나 이는 자식 구성 요소를 만들 때 입력 속성을 제공하는 부모 속성이 이미 채워졌다고 가정합니다.

시나리오에서는 그렇지 않습니다. 이미지 데이터는 서비스에서 비동기식으로 채워집니다(따라서 http 요청).따라서 다음과 같은 경우 입력 속성이 채워지지 않습니다.ngOnInit()이 호출됩니다.

문제를 해결하려면 서버에서 데이터를 반환할 때 상위 속성에 새 배열을 할당합니다.시행하다ngOnChanges()어린 시절에 ngOnChanges()각도 변경 감지가 새 배열 값을 하위 배열로 전파할 때 호출됩니다.

또한 값이 변경될 때마다 호출되는 영상에 대해 세터를 추가할 수 있으며 세터 자체에서 기본 선택 영상을 설정할 수 있습니다.

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

몇 가지 사항만 변경하면 해결할 수 있습니다.

  export class ImageGalleryComponent implements OnInit {

  @Input() images: Image[];
  selectedImage: Image;

  ngOnChanges() {
      if(this.images) {
        this.selectedImage = this.images[0];
      }
  }

 }

그리고 또 다른 솔루션으로, 당신은 간단하게*ngIf네트워크에서 필요한 것을 얻을 때까지 모든 템플릿 컨텐츠:

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

가져오기 방법에서 플래그 값을 전환합니다.

  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);
     }
     this.imagesLoaded = true; /* <--- HERE*/
    }, error => this.errorMessage = <any>error
   );
 }

이렇게 하면 부모가 정적 콘텐츠에 자식이 필요로 하는 모든 것을 가질 때만 자식 구성 요소를 렌더링합니다.데이터 가져오기 상태를 나타내는 로더/스피너가 있을 때 더욱 유용합니다.

...
<image-gallery *ngIf="imagesLoaded" [images]="images"></image-gallery>
<loader-spinner-whatever *ngIf="!imagesLoaded" [images]="images"></loader-spinner-whatever>
...

하지만 질문에 대한 간단한 대답은 다음과 같습니다.

• 입력을 사용할 수 있는 경우
  • 인OnInit갈고리
• 자녀 구성 요소에서 사용할 수 없는 이유는 무엇입니까?
  • 그렇습니다, 하지만 이 특정 시점에는 로드되지 않았습니다.
• 이걸로 뭘 할 수 있을까요?
  • 하위 구성 요소를 렌더링할 때까지 인내심을 갖고 기다리십시오. 비동기식으로 데이터를 가져오거나 하위 구성 요소를 학습하여 처리할 수 있습니다.undefined 상태 상입

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