कोणीय घटक

Question

का उपयोग कर घटक बाध्यकारी परिवर्तन को कैसे देखें I कोणीय घटक बाध्यकारी परिवर्तन और क्रियाएं कैसे कर सकते हैं?

angular.module('myapp') 
    .component('myComponent', { 
     templateUrl: 'some.html', 
     controller: MyController, 
     controllerAs: 'myCtrl', 
     bindings: { 
      items: '<' 
     } 
    }); 

अब जब items परिवर्तन मैं इस मूल्य का उपयोग कर एक और काम करवाना चाहते हैं,
मैं इसे कैसे कर सकता है?

Answer 1

अब आइटम बदलते समय मैं इस मान का उपयोग करके एक और क्रिया करना चाहता हूं, मैं इसे कैसे कर सकता हूं?

लेकिन तुम नहीं$scope उपयोग करने के लिए आप किसी भी परिवर्तन जैसे पता लगाने के लिए एक संपत्ति सेटर उपयोग कर सकते हैं करना चाहते हैं अगर मैं मर $ गुंजाइश

का उपयोग कर से बचना चाहते हैं :

class MyController { 
    private _items: string[] = [] 
    set items(value:string[]){ 
     this._items = value; 
     console.log('Items changed:',value); 
    } 
    get items():string[]{ 
     return this._items; 
    } 
} 

const ctrl = new MyController(); 
ctrl.items = ['hello','world']; // will also log to the console 

कृपया ध्यान दें कि आप जटिल तर्क के लिए इसका इस्तेमाल नहीं करना चाहिए (कारण हैं: https://basarat.gitbooks.io/typescript/content/docs/tips/propertySetters.html)

Answer 2

मुझे एक तरीका पता चला है लेकिन यह सुनिश्चित नहीं है कि यह सबसे कुशल है। सबसे पहले निर्भरता के रूप में $ स्कोप लाएं और इसे this._scope या अपने कन्स्ट्रक्टर की तरह सेट करें। मैं अपने $onInit समारोह में उसके बाद निम्न है:

this._scope.$watch(() => { 
    return this.items; 
    }, 
    (newVal, oldVal) => { 
    // Do what you have to here 
    }); 

यह बेहद जवाब यहाँ से प्रेरित है: Angularjs: 'controller as syntax' and $watch

आशा है कि यह मदद करता है, यह क्या मैं जब तक मैं नहीं तो बताया हूँ उपयोग करने के लिए जा रहा हूँ है।

Answer 3

वर्तमान में आप $ स्कोप के बिना कोणीय निरीक्षक का उपयोग नहीं कर सकते क्योंकि परिवर्तन पहचान लगभग $ गुंजाइश पर आधारित है। यहां तक ​​कि यदि आप HTML में अभिव्यक्तियों का उपयोग करते हैं तो यह delegate watch functionality to $scope होगा।

भले ही आप देखने के लिए कुछ अन्य तंत्र बनाते हैं, आपको मैन्युअल रूप से अनचाहे करना याद रखना होगा - और $ स्कोप के साथ यह स्वचालित रूप से किया जाता है।

Answer 4

यहाँ basarat's answer के ES5.1 संस्करण है:

function MyController() { 
    var items = []; 

    Object.defineProperty(this, 'items', { 
    get: function() { 
     return items; 
    }, 

    set: function(newVal) { 
     items = newVal; 
     console.log('Items changed:', newVal); 
    } 
    }); 
} 

Object.defineProperty() का उपयोग करना। सभी प्रमुख ब्राउज़रों और आईई 9 + द्वारा समर्थित।

Answer 5

आप नियंत्रक जब भी एक तरह से बाइंडिंग अपडेट किया जाता है

$onChanges(changesObj) कहा जाता है $onChanges विधि जोड़ सकते हैं। परिवर्तन ओबीजे एक हैश है जिनकी चाबियाँ बाध्य गुणों के नाम हैं जो बदल गई हैं, और मान फ़ॉर्म का एक उद्देश्य हैं।

उदाहरण के बाद canChange परिवर्तन ईवेंट संभालती है।

angular.module('app.components', []) 
 
.component('changeHandler', { 
 
    controller: function ChangeHandlerController() { 
 
    $onChanges: function (changes) { 
 
     if (changes.canChange) 
 
     this.performActionWithValueOf(changes.canChange); 
 
    }; 
 
    }, 
 
    bindings: { 
 
    canChange: '<' 
 
    }, 
 
    templateUrl: 'change-handler.html' 
 
});

AngularJS> = 1.5.3 आवश्यक है और केवल एक तरह से डेटा-बाइंडिंग (उदाहरण के ऊपर के रूप में) के साथ काम करता है।

डॉक्स: https://docs.angularjs.org/guide/component

संदर्भ: http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html