@Input() मान हमेशा अनिर्धारित है

Question

मैंने user photo component बनाया है जो @Input() मान लेता है, यह मान उपयोगकर्ता आईडी है। यदि मान पास हो जाता है तो मैं इस उपयोगकर्ता को जोड़ने के लिए Firebase से जानकारी पुनर्प्राप्त करता हूं, अगर ऐसा नहीं होता है तो मैं कुछ और करता हूं।

मेरे उपयोगकर्ता के फोटो घटक

import { Component, OnInit, OnDestroy, Input } from '@angular/core'; 

@Component({ 
    selector: 'user-photos', 
    templateUrl: './user-photos.component.html', 
    styleUrls: ['./user-photos.component.css'] 
}) 

export class UserPhotoComponent implements OnInit { 

    @Input() userId: string; 

    constructor() { 

     console.log('userId is:',this.userId); 

    } 


    ngOnInit() { 


    } 

    ngOnDestroy() { 

    } 
} 

आप देख सकते हैं मैं अपने edit-profile component मैं निम्नलिखित है पर @Input() के रूप में userId घोषणा की है, अब:

<user-photos [userId]="TestingInput"></user-photos> 

अब उपयोगकर्ता फ़ोटो घटक हो जाता है प्रस्तुत किया गया है क्योंकि मुझे h1 टैग दिखाई देता है, हालांकि उपयोगकर्ता आईडी हमेशा अनिर्धारित है?

डेवलपर कंसोल में कोई त्रुटि दिखाई नहीं दे रही है, इसलिए मुझे पूरा यकीन नहीं है कि मैंने क्या गलत किया है।

Answer 1

इसे ngOnInit में शुरू किया जाएगा, कन्स्ट्रक्टर नहीं। (भी Angular Life Cycle Hooks documentation की समीक्षा करें।)

ngOnInit() { 
    console.log('userId is:',this.userId); 
} 

इसके अलावा, अगर आप एक स्ट्रिंग की तरह एक शाब्दिक गुजरती हैं और कोष्ठक [] आप का उपयोग एक टिक के साथ मूल्य बंद करके एक स्ट्रिंग के रूप में यह पारित करने के लिए करना चाहते हैं।

<user-photos [userId]="'TestingInput'"></user-photos> 

कि के लिए कारण युक्त अभिव्यक्ति युक्त घटक के संदर्भ में मूल्यांकन किया जाता है है तो यह बिना इसे पुनः प्राप्त करने और (जब तक आप भी हो एक संपत्ति/TestingInput नामित क्षेत्र है जो अपरिभाषित हो जाएगा पारित करने की कोशिश करेंगे उस नाम से एक क्षेत्र है)।