typescript - Angular2 में परिवर्तन का पता लगाने के लिए कैसे?




angular2-changedetection (2)

इस सवाल का पहले से ही उत्तर दिया गया है:

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

मेरे पास एक UserService जिसमें currentUser प्रॉपर्टी है जो एक व्यवहार विषय है:

currentUser: Subject<User> = new BehaviorSubject<User>(new User(null));

और जब मैं उपयोगकर्ता को फेसबुक जावास्क्रिप्ट एसडीके के जवाब में अपडेट करना चाहता हूं, तो मुझे उपयोगकर्ता ने लॉग इन या लॉग आउट किया है, मैं इसे अपडेट करता हूं और एक ApplicationRef पर tick() कॉल करने की आवश्यकता है:

updateUser(user: User) {
  console.log('UserService.updateUser:', user);
  this.currentUser.next(user);
  this.appRef.tick(); // UI does not update without this
}

constructor(facebook: Facebook) {
  this.facebook.facebookEvents.filter(x => x != null 
         && x.eventName == 'auth.authResponseChange')
      .subscribe((event) => {
        this.updateUser(new User(event.data));
      }
}

अपने घटक में मैं 'वर्तमान उपयोगकर्ता' को उपयोगकर्ता सेवा से कंस्ट्रक्टर में रखता हूं और मूल्य प्रॉपर्टी से बाइंड करता हूं:

<h2>Logged into Facebook as {{currentUser.value.name}}</h2>
<p>Is this you? &nbsp; <img src="{{currentUser.value.profilePicUrl}}"></p>

क्या मुझसे कुछ गलत हो रही है? किसी बाह्य पुस्तकालय से होने वाले परिवर्तन के बाद आवेदनकर्ता को कॉल करने के बजाय क्या एक बेहतर तरीका है?

संपादित करें

मैंने एनजीज़ोन का उपयोग करने की कोशिश की और वह एक अलग घटना का उपयोग करके काम नहीं कर रहा है, जो उनके माध्यम से सेवा पृष्ठों के रूप में एक फ़ीड में पोस्ट देता है:

constructor(userService: UserService, private ref: ApplicationRef, private zone: NgZone)

...

this.postsSubject.subscribe((post) => {
  this.zone.runOutsideAngular(() => { // doesn't do anything
    this.posts.push(post);
    console.log('postsSubject POST, count is ', this.posts.length);
    ref.tick(); // required to update bindings
  });
}

कंसोल में गिनती बढ़ने को दर्शाता है, लेकिन HTML बाध्यकारी {{posts.length}} केवल अगर मैं ref.tick() कॉल ref.tick() तो अपडेट किया जाता है ...

मुझे लगता है कि मैंने कहीं देखा है कि आप शीर्ष-स्तरीय एप घटक से किसी भी घटक को उपलब्ध 'इनपुट' बना सकते हैं जो लॉग इन उपयोगकर्ता के लिए जाने का तरीका हो सकता है, लेकिन अन्य कॉल नहीं जैसे कि फ़ीड में पद प्राप्त करना ...


मुझे यकीन नहीं है कि यह बेहतर है। वहाँ कई अन्य तरीके हैं जिनके बारे में मैं सोच सकता हूं

एनजी ज़ोन का उपयोग करना

आप नेक्ज़ोन इंजेक्षन कर सकते हैं और कॉलबैक के साथ रन विधि को निष्पादित कर सकते हैं:

 NgZone.run(()=>this.currentUser.next(user));

SetTimeout का उपयोग करना

setTimeout स्वचालित रूप से परिवर्तन पहचान ट्रिगर करेगा:

setTimeout(()=>this.currentUser.next(user));

क्या मुझसे कुछ गलत हो रही है? किसी बाह्य पुस्तकालय से होने वाले परिवर्तन के बाद आवेदनकर्ता को कॉल करने के बजाय क्या एक बेहतर तरीका है?

निर्भर करता है। अगर आप कोनेरी के बाहर फेसबुक एपीआई बुला रहे हैं (यानी, कोणीय के बाहर अतुल्यकालिक घटना संचालकों को पंजीकृत कर रहे हैं), तो आपको किसी भी घटनाओं को संभालने के भाग के रूप में मैन्युअल रूप से परिवर्तन का पता लगाने की आवश्यकता होगी। आप या तो यह कर सकते हैं

  • NgZone इंजेक्षन NgZone और फिर उस ऑब्जेक्ट पर run() को कॉल करें, जो NgZone ज़ोन के अंदर पारित (कॉलबैक) फ़ंक्शन को निष्पादित करेगा और फिर अपने आप को ApplicationRef().tick() कॉल करेगा, जो संपूर्ण ऐप के लिए परिवर्तन का पता लगाएगा, या
  • ApplicationRef इंजेक्षन और tick() अपने आप को, या
  • ChangeDetectorRef इंजेक्षन करें और कॉल detectChanges() अपने आप को - यह केवल एक घटक और उसके बच्चों पर परिवर्तन का पता detectChanges()

ध्यान दें, यदि आप NgZone इंजेक्ट NgZone , तो आप runOutsideAngular() का उपयोग नहीं करना चाहते हैं। यह एंगल ज़ोन के बाहर पारित (कॉलबैक) फ़ंक्शन को निष्पादित करेगा, और यह ApplicationRef().tick() को नहीं बुलाएगा ApplicationRef().tick() , इसलिए परिवर्तन का पता लगाने निष्पादित नहीं होगा।

अगर आप कांगारू के अंदर फेसबुक एपीआई कहते हैं, तो आप उपर्युक्त सभी से बच सकते हैं, क्योंकि फिर कांगारू (जोन के उपयोग के माध्यम से) को बंदर-पैच को अतुल्यकालिक इवेंट कॉल्स होना चाहिए। उसके बाद, जब आपके ईवेंट आग लग जाएंगे, तो ApplicationRef.tick() को स्वचालित रूप से कहा जाएगा। इस दृष्टिकोण पर अधिक चर्चा के लिए https://.com/a/34593821/215945 देखें।





angular2-changedetection