ईएस 6 कक्षा और बेबेल

Question

के साथ कोणीय सेवा मैं एक ईएस 6 कक्षा को कोणीय सेवा के रूप में उपयोग करने की कोशिश कर रहा हूं लेकिन जब इसे तत्काल किया जाता है, तो विधियों को कन्स्ट्रक्टर चर तक पहुंच नहीं होती है।

class dataWrapperService { 

    constructor($q, $log) { 
     this.$q = $q; 
     this.$log = $log; 
    } 

    data() { 
     console.log(this.$q); 
    } 
} 

dataWrapperService.$inject = ['$q', '$log']; 

app.service('dataWrapper', dataWrapperService); 

एक बार सेवा कोणीय द्वारा इंजेक्शन हो जाता है और मैं इस पर डेटा विधि कॉल, विधि निर्माता मूल्यों के लिए उपयोग किया है विफल रहता है।

// calling the data method results in an error 
dataWrapper.data(); //TypeError: Cannot read property '$q' of undefined 

// console.log output of dataWrapper: 
Object 
    $log: Object 
    $q: Q(resolver) 
    __proto__: smDataWrapperService 
    constructor: smDataWrapperService($q, $log) 
    data: data() 
    __proto__: Object 

लेकिन ...

मैं नई dataWrapperService मैन्युअल रूप से और है कि बस ठीक काम करता है।

var dataWrapper = new smDataWrapperService("hello", "sir"); 
dataWrapper.data(); // "hello" 

मुझे यहां क्या याद आ रही है?

अद्यतन:

---

यह वादा कॉलबैक में केवल हो रहा प्रतीत हो रहा है:

मैं आमतौर पर इस तरह तो/कैच के कार्यों पारित:

$http.get('whatever').then(dataWrapper.data); 

लेकिन केवल निम्नलिखित काम करेंगे:

$http.get('whatever').then((response) => smDataWrapper.data(response)) 

Answer 1

कोणीय को app.factory('dataWrapper', dataWrapperService); पर एक समारोह की आवश्यकता नहीं है और कक्षा नहीं है।

आप अपनी कक्षा में एक स्थिर फैक्ट्री विधि जोड़ सकते हैं और इसे app.factory में जोड़ सकते हैं। (कोड स्निपेट नीचे अद्यतन देखें)

कोड इस तरह काम करना चाहिए:

class dataWrapperService { 

    constructor($q, $log) { 
     this.$q = $q; 
     this.$log = $log; 
    } 

    data() { 
     console.log(this.$q); 
    } 

    static dataWrapperFactory($q, $log) { 
     dataWrapperService.instance = new dataWrapperService($q, $log); 
     return dataWrapperService.instance; 
    } 
} 

dataWrapperService.$inject = ['$q', '$log']; 

app.factory('dataWrapper', dataWrapperService.dataWrapperFactory); 

अद्यतन

तो जैसा कि टिप्पणी में उल्लेख किया है अपने कोड काम करना चाहिए क्योंकि एक ES6 वर्ग एक निर्माता है फ़ंक्शन और यह angular.service की अपेक्षा है।

यदि मैं आपके कोड के साथ कोई अन्य समस्या देख सकता हूं तो मैं बाद में जांच करूंगा।

Answer 2

मैं जानता हूँ कि यह देर हो चुकी है, लेकिन शायद किसी को इसी तरह की समस्याओं के साथ आज मेरे जैसे इस मुद्दे पर आते हैं जाएगा, ताकि ...

वास्तव में, यह वादों के बारे में नहीं है। जब आप ऐसा करते:

let function1 =() => {} 
let function2 = function1 

वास्तव में, this वस्तु कार्यों के लिए अलग है। इसलिए, जब आप .then(function1) आज़माते हैं, वास्तव में function1 को पैरा successCallback पर कॉपी किया जा रहा है और यह this बदल गया है।

लेकिन जब आप .then(() => function1()) उपयोग करते हैं, successCallback अपने लैम्ब्डा प्राप्त करता है, और function1 की वास्तविक this गुम नहीं होता।

तो अगर तुम नहीं जानते, तो आप क्या कभी नहीं एक समारोह जावास्क्रिप्ट में एक समारोह को निर्दिष्ट करते हैं, lambdas का उपयोग बजाय

Answer 3

कोणीय 1.6.4 के साथ, मैं जब मैं कोशिश कर रहा हूँ त्रुटि मिल रही है कुछ नियंत्रक में एक वर्ग के रूप में परिभाषित एक सेवा इंजेक्षन करने के लिए।

बजाय एक समारोह

के रूप में एक वर्ग के कॉल नहीं कर सकता, मैं एक सेवा के रूप में एक समारोह का उपयोग करना चाहते। जितना संभव हो सके इसे साफ रखने के लिए मैं एक ऐसा फ़ंक्शन निर्यात करूंगा जो तुरंत तत्काल अज्ञात वर्ग लौटाए। और इसे एक अलग फ़ाइल में करें और किसी अन्य फ़ाइल में सेवा बनाने के लिए उस फ़ंक्शन को आयात करें और उपयोग करें।

और चूंकि आप बेबेल के साथ ES6 का उपयोग करने के लिए कह रहे हैं, तो निर्यात किए गए फ़ंक्शन के ऊपर '/* @ngInject */' जोड़कर निर्भरता को सुरक्षित रूप से इंजेक्शन देने के लिए babel-plugin-angularjs-annotate का उपयोग करें।

इंजेक्शन सेवाएं $q और $log या बंद करके कक्षा में उपलब्ध हैं। (उन्हें कन्स्ट्रक्टर में पास करने और इसे असाइन करने की आवश्यकता नहीं है।)

// dataWrapperService.js 
/* @ngInject */ 
export const dataWrapperService = ($q, $log) => new class { 
    constructor() { 
    // do stuff 
    } 

    data() { 
    // $q available through closure 
    console.log($q) 
    } 
}() 

// in your.module.js 
import angular from 'angular' 

import { dataWrapperService } from './dataWrapperService' 

export const YourModule = angular 
    .module('yourmodule', []) 
    .factory('dataWrapper', dataWrapperService) 
    .name