각도:라이프사이클 후크가 구성 요소에서 사용할 수 있는 데이터를 입력하는 경우
다음의 배열을 수신하는 구성 요소가 있습니다.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
'programing' 카테고리의 다른 글
런타임 오류:입력 유형(토치).FloatTensor) 및 체중 유형(torch.cuda).FloatTensor)는 같아야 합니다. (0) | 2023.05.04 |
---|---|
오류 - IIS 메타베이스에 액세스할 수 없습니다. (0) | 2023.05.04 |
부분적으로 복사된 파일로 scp를 재개하는 방법은 무엇입니까? (0) | 2023.05.04 |
동일한 서버에 있는 Mongo DB의 여러 인스턴스 (0) | 2023.05.04 |
typedef를 사용하지 않고 블록 메서드 매개 변수 선언 (0) | 2023.05.04 |