कोणीय 2: घटक के अंदर @ इनपुट के साथ कुछ करें

Question

मैं घटक के अंदर @ इनपुट मूल्य के साथ कुछ कैसे कर सकता हूं ??

उदाहरण के लिए:

<log-user [user]="user"></log-user> 

मान लेते हैं कि user एक वस्तु है करते हैं। अब, मुझे पता है कि मैं इस उपयोगकर्ता डेटा को te log-user टेम्पलेट के अंदर कैसे पारित कर सकता हूं, लेकिन मैं इस घटक के अंदर user के साथ कुछ कैसे कर सकता हूं ??

LogUserComponent:

@Component({ 
    selector: 'log-user', 
    template: ` 

    This works: {{user}} 

    ` 
}) 

export class LogUserComponent { 

    @Input() user:any; 

    constructor() { 
    // this get's logged as undefined?? 
    console.log(this.user); 
    } 
} 

किसी भी मदद की बहुत अच्छा होगा !! अग्रिम में धन्यवाद!

Answer 1

निर्माण समय पर @Input मान अभी तक सेट नहीं है। वास्तव में घटक का निर्माण करने से पहले Angular2 @Input मान कैसे सेट कर सकता है?

आपको घटक को प्रारंभ करने की प्रतीक्षा करनी है; जिसका अर्थ है कि सभी @Input मान सेट किए गए हैं। आप OnInit इंटरफ़ेस को कार्यान्वित करके ऐसा कर सकते हैं।

तो अपने उदाहरण ठीक करने के लिए:

<log-user [user]="user"></log-user> 

^{(नोट: user, एक परिभाषित वस्तु होना चाहिए अन्यथा इस उदाहरण अपरिभाषित अभी भी लॉग इन करना होगा में आप log-user HTML टैग करने के लिए *ngIf="user" जोड़ने सुनिश्चित करने के लिए कर सकते हैं। टैग से पहले user वास्तव में मौजूद गाया नहीं प्राप्त करता है)}

है:।

import {Component, Input, OnInit} from 'angular2/core'; 

@Component({ 
    selector: 'log-user', 
    template: `This works: {{user}}` 
}) 
export class LogUserComponent implements OnInit { 

    @Input() user:any; 

    ngOnInit() { 
    // this now gets logged as 'user' 
    console.log(this.user); 
    } 
} 

आप, साथ ही इंटरफ़ेस को लागू करने के बिना अपने घटक पर ngOnInit विधि बना सकते हैं, लेकिन OnInit इंटरफ़ेस आपको टाइपप्रति संकलक द्वारा सुनिश्चित कर रहे हैं आयात करके एक टाइपो गलती नहीं बनाते हैं।

Angular docs about OnInit कहता है:

के बाद अपने निर्देश के डेटा-बाउंड गुण कस्टम आरंभीकरण तर्क निष्पादित करने के लिए इस इंटरफेस को लागू करें प्रारंभ की है।

ngOnInit कहा जाता है सही होने के बाद यह निर्देश के डेटा-बाउंड गुण पहली बार के लिए जाँच की गई है, और अपने बच्चों में से किसी से पहले जाँच की गई है। यह केवल एक बार लागू होता है जब निर्देश तत्काल होता है।

Answer 2

कुछ और शोध के बाद, मुझे यह पोस्ट "@Input property is undefined in angular 2's onInit" मिला।

तो उत्तर वास्तव में काफी आसान है। क्योंकि इस उदाहरण में user एक एपीआई कॉल से आने वाली एक वस्तु है, यह घटक के प्रारंभ में अपरिभाषित है (उम्मीद है कि मैं इसे सही तरीके से कह रहा हूं) ..

<log-user *ngIf="user" [user]="user"></log-user>

Answer 3

चूंकि हमारे कोणीय घटक इस प्रकार एक @Component() डेकोरेटर हम टीएस accessors लाभ उठाने के लिए इंजेक्शन मूल्य अवरोधन करने में सक्षम हैं के साथ ES6 वर्ग हैं:: *ngIf फिक्स इस का उपयोग करते हुए

मुख्य अंतर यह है कि संपत्ति को सजाने के बजाय हम सेटर को सजाने के लिए तैयार करते हैं।

अधिक जानकारी http://www.typescriptlang.org/docs/handbook/classes.html

<log-user [user]="user"></log-user> 

अंदर Component.ts

export class LogUserComponent { 
    private _user:any; 

    get user() { 
    return this._user; 
    } 
    @Input() 
    set user(user:any) { 
    // to catch undefined user 
    if(!user) return; 
    this._user = user; 
    // modify the user here example below 
    // this._user = 'X' + user; 
    } 

    constructor() { 

    } 
}