Angular2/Typecript

Question

में किसी ऑब्जेक्ट के फ़ील्ड पर परिवर्तनों को सुनें Angular2/Typecript में, क्या परिवर्तन के लिए ऑब्जेक्ट के फ़ील्ड को "देखना" संभव है।

उदाहरण के लिए, मैं क्षेत्रों firstName, lastName, और fullName के साथ एक कक्षा Person है कहना। firstName या lastName परिवर्तनों के साथ स्वचालित रूप से fullName अपडेट करना संभव है?

कुछ इस तरह:

export class Person { 
    firstName: string= ''; 
    lastName: string = ''; 
    fullName: string = ''; 

    constructor(firstName: string, lastName: string) { 
    this.firstName.onChange(() => { this.updateFullName(); }); 
    this.lastName.onChange(() => { this.updateFullName(); }); 

    this.firstName = firstName; 
    this.lastName = lastName; 
    } 

    updateFullName() { 
    this.fullName = `${this.firstName} ${this.lastName}`; 
    } 
} 

Answer 1

पहले दृष्टिकोण

आप टाइपप्रति setters का लाभ उठाने सकता है/टिककर खेल नीचे वर्णित के रूप में साथ firstName और lastName FULLNAME सिंक्रनाइज़ करने के लिए:

get lastName() { 
    return this._lastName; 
} 

set lastName(lastName:string) { 
    this._lastName = lastName; 
    this.fullName = this._firstName + ' ' + this._lastName; 
} 

get firstName() { 
    return this._firstName; 
} 

set firstName(firstName:string) { 
    this._firstName = firstName; 
    this.fullName = this._firstName + ' ' + this._lastName; 
} 

इस तरह अंतिम नाम या प्रथम नाम सेट करते समय, पूर्ण नाम स्वचालित रूप से अपडेट हो जाता है:

var p = new Person(); 
p.lastName = 'last'; 
p.firstName = 'first'; 
console.log(p.fullName); // print 'first last' 

दूसरा दृष्टिकोण

Angular2 डिफ़ॉल्ट रूप से वस्तुओं के भीतर गुण के परिवर्तन को परिभाषित करने की अनुमति नहीं है। यह केवल संदर्भों के अपडेट का पता लगाता है। मेरा मतलब है कि एक बाध्य संपत्ति के संदर्भ (या आदिम प्रकार के लिए मूल्य) अद्यतन किया गया है।

उस बिएन ने कहा, Angular2 ngDocheck हुक विधि का उपयोग करके अपनी रणनीति को प्लग करने की अनुमति देता है।

इसमें आप विशिष्ट वस्तुओं में अपडेट का पता लगाने के लिए KeyValueDiffers वर्ग (इंजेक्शन के लिए) का लाभ उठा सकते हैं।

अधिक जानकारी के लिए इस लिंक देखें:

@Component({ 
    selector: 'my-component', 
    (...) 
}) 
export class MyComponent implements DoCheck { 
    @Input() person: Person; 
    differ: any; 

    constructor(differs: KeyValueDiffers) { 
    this.differ = differs.find([]).create(null); 
    } 

    ngDoCheck() { 
    var changes = this.differ.diff(this.person); 

    if (changes) { 
     changes.forEachChangedItem((elt) => { 
     if (elt.key === 'firstName' || elt.key === 'lastName') { 
      this.person.fullName = this.person.firstName + ' ' + this.person.lastName; 
     } 
     }); 
    } 
    } 
} 

जब prop1 संपत्ति के मूल्य अद्यतन किया जाता है, doSomethingIfProp1Change विधि है:

• https://angular.io/docs/ts/latest/api/core/DoCheck-interface.html

यहां एक नमूना है बुलाया।

इस प्लंकर को देखें: http://plnkr.co/edit/uvOKMXQa9Ik8EiIhb60Y?p=preview।