कोणीय: जिसमें जीवनचक्र हुक इनपुट डेटा घटक के लिए उपलब्ध है

Question 1

मेरे पास एक घटक है जो डेटा के 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>
...

Question 2

इनपुट संपत्तियों को पहले आबाद किया जाता है ngOnInit()कॉल करने जाता है। हालाँकि, यह अभिभावक की संपत्ति को मानता है जो इनपुट घटक को खिलाती है, जब बच्चा घटक बनाया जाता है तो पहले से ही आबादी है।

आपके परिदृश्य में, यह मामला नहीं है - छवियों के डेटा को एक सेवा से अतुल्यकालिक रूप से आबाद किया जा रहा है (इसलिए http अनुरोध)। इसलिए, जब ngOnInit()कहा जाता है तो इनपुट प्रॉपर्टी आबाद नहीं होगी ।

आपकी समस्या को हल करने के लिए, जब डेटा सर्वर से वापस आ जाता है, तो मूल संपत्ति के लिए एक नया सरणी असाइन करें। ngOnChanges()बच्चे में लागू करें । ngOnChanges()कहा जाता है जब कोणीय परिवर्तन का पता लगाने के लिए नए सरणी मूल्य को बच्चे के नीचे प्रचारित किया जाएगा।

Question 3

आप अपनी छवियों के लिए एक सेटर भी जोड़ सकते हैं जिसे जब भी मूल्य में बदलाव कहा जाएगा और आप अपनी डिफ़ॉल्ट चयनित छवि को सेटर में ही सेट कर सकते हैं:

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

Question 4

आप बस कुछ चीजों को बदलकर इसे हल कर सकते हैं।

  export class ImageGalleryComponent implements OnInit {

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

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

 }