दिलचस्प पोस्ट
सी + कोड को जोड़ने के लिए जी ++ लिंक ऑर्डर निर्भरता PHP में फ़ोन नंबर फ़ॉर्मेट करना एचडीएफ 5 – संगामी, संपीड़न और I / O प्रदर्शन मैं कैसे बता सकता हूं कि एक `एनएसएएमएज्ड ऑब्जेक्ट` को हटा दिया गया है? सी ++ में बिटमैप ऑब्जेक्ट के रूप में खिड़की का स्क्रीनशॉट कैसे प्राप्त करें? Angular2 5 मिनट स्थापित बग – आवश्यकता परिभाषित नहीं है java.text.ParseException: अप्रभावी तिथि अमेज़ॅन s3 को एचटीएमएल, जावास्क्रिप्ट और अजाक्स अनुरोध के साथ jQuery के साथ छवि अपलोड करना (कोई PHP नहीं) नियमित अभिव्यक्ति विपरीत जावास्क्रिप्ट .प्रोटोटाइप कैसे काम करता है? एसक्यूएल में कोमा से अलग परिणाम एमुलेटर पर एंड्रॉइड मार्केट ऐप कैसे स्थापित करें? जावा में अस्थिर क्षेत्रों और सिंक्रनाइज़ किए गए ब्लॉक वाले रिश्ते से पहले – और गैर-वाष्पशील चर पर उनका असर होता है? गतिशील रूप से एक पायथन क्लास लोड कैसे करें स्विफ्ट में "इंडेक्स रेंज से बाहर" कैसे पकड़ सकता हूं?

कोणीय 2 बीटा में एचटीपीएपी सेवा को कुशलता से उपभोग कैसे करें?

मैं कोनालर 2-बीटा के साथ खेलना चाहता हूं और मैं एचटीपीपी घटक के साथ काम करना चाहता हूं। लेकिन यहां एक गंभीर समस्या है:

मैं इसे पढ़ता हूं और मुझे पता है कि कांगारिका 2 में (कोन्यूलर 1 के विपरीत), एचटीटीपी घटक एक ऐसी सेवा नहीं है जो वादा करता है । यह कुछ कहलाता है जिसे अवलोकन किया जाता है हम जानते हैं कि एचटीटीपी सीधे उपयोग करने के लिए एक घटक बेहतर नहीं है एचटीटीपी का उपभोग करने के लिए जिम्मेदार एक ऐसी सेवा बनाने के लिए कुशल तरीके से है पर कैसे?! क्या यह अनुरोध पूरा करने के बाद, एक वादा वापस करें? ( यहां देखो)

क्या यह बिल्कुल समझ में आता है ?!

Solutions Collecting From Web of "कोणीय 2 बीटा में एचटीपीएपी सेवा को कुशलता से उपभोग कैसे करें?"

सेवाओं को कार्यान्वित करने के लिए कांगार 2 के साथ संभव है। वे नीचे वर्णित इंजेक्शन वर्गों के अनुरूप हैं इस मामले में इस श्रेणी को अन्य तत्वों जैसे इंजेक्ट किया जा सकता है जैसे घटक।

 import {Injectable} from 'angular2/core'; import {Http, Headers} from 'angular2/http'; import 'rxjs/add/operator/map'; @Injectable() export class CompanyService { constructor(http:Http) { this.http = http; } } 

आप अपने अनुप्रयोग के मुख्य घटक को बूटस्ट्रैक्ट करते समय HTTP_PROVIDERS निर्दिष्ट की गई स्थिति में आप इसे में एक Http ऑब्जेक्ट इंजेक्ट कर सकते हैं (इसके कन्स्ट्रक्टर का प्रयोग करके):

 import {bootstrap} from 'angular2/platform/browser' import {HTTP_PROVIDERS} from 'angular2/http'; import {AppComponent} from './app.component' bootstrap(AppComponent, [ HTTP_PROVIDERS ]); 

नीचे दी गई जानकारी के अनुसार इस सेवा को एक घटक में इंजेक्ट किया जा सकता है। घटक के providers सूची में इसे निर्दिष्ट करने के लिए मत भूलना

 import { Component, View, Inject } from 'angular2/core'; import { CompanyService } from './company-service'; @Component({ selector: 'company-list', providers: [ CompanyService ], template: ` (...) ` }) export class CompanyList { constructor(private service: CompanyService) { this.service = service; } } 

फिर आप अपनी सेवा में Http ऑब्जेक्ट का लाभ उठाने वाली विधि को लागू कर सकते हैं और आपके अनुरोध के अनुरूप अवलोकनशील वस्तु वापस कर सकते हैं:

 @Injectable() export class CompanyService { constructor(http:Http) { this.http = http; } getCompanies() { return this.http.get('https://angular2.apispark.net/v1/companies/') .map(res => res.json()); } } 

घटक फिर इस getCompanies विधि को कॉल कर सकते हैं और जब ऑब्जेक्ट की स्थिति को अपडेट करने के लिए प्रतिक्रिया होती है, तो सूचित करने के लिए ऑब्ज़र्वबल ऑब्जेक्ट पर एक कॉलबैक की सदस्यता लें (उसी तरह आपने अंगुलर 1 में वादे के साथ किया था):

 export class CompanyList implements OnInit { public companies: Company[]; constructor(private service: CompanyService) { this.service = service; } ngOnInit() { this.service.getCompanies().subscribe( data => this.companies = data); } } 

संपादित करें

जैसा कि फॉक्सक्स ने अपनी टिप्पणी में सुझाव दिया है, async पाइप का भी उपयोग करने योग्य ऑब्जेक्ट पर निषेधात्मक रूप से उपयोग किया जा सकता है इसका उपयोग करने का तरीका यहां है पहले अपने घटक को उस विशेषता में दिखाए गए वस्तु को देखने के लिए अद्यतन करें, जिसे आप दिखाना चाहते हैं:

 export class CompanyList implements OnInit { public companies: Company[]; constructor(private service: CompanyService) { this.service = service; } ngOnInit() { this.companies = this.service.getCompanies(); } } 

तो अपने टेम्पलेट में async पाइप का उपयोग करें:

 @Component({ selector: 'company-list', providers: [ CompanyService ], template: ` <ul> <li *ngFor="#company of companies | async">{{company.name}}</li> </ul> ` }) export class CompanyList implements OnInit { (...) } 

दो भागों में यह लेख अधिक विवरण भी दे सकता है:

आशा है कि यह आपकी मदद करता है, थियरी

एचटीपीपी के पास () पद्धति से एक वादा में लौटे हुए दृश्य को परिवर्तित करने की कोई जरूरत नहीं है। ज्यादातर मामलों में, सेवा केवल अवलोकन योग्य वापस कर सकती है।

यदि हम सर्वर से एक सरणी या एक आदिम प्रकार (यानी, स्ट्रिंग, संख्या, बूलीयन) ला रहे हैं, तो हम अपने नियंत्रक तर्क को सरलीकृत करके हमारे टेम्पलेट में प्रत्यक्ष रूप से लौटने वाले एसिंकपिप के साथ सीधे सरल कर सकते हैं। यह पाइप स्वचालित रूप से देखने योग्य (यह भी एक वादा के साथ काम करता है) की सदस्यता लेता है और यह सबसे हाल ही में मूल्य वापस करेगा कि नमूदार उत्सर्जित है। जब एक नया मान उत्सर्जित हो जाता है, तो पाइप परिवर्तन के लिए घटक की जांच करता है, इसलिए दृश्य स्वत: नए मान के साथ अपडेट होगा।

अगर हम सर्वर से कोई ऑब्जेक्ट ला रहे हैं, तो मैं एसिंकपिप का उपयोग करने के लिए किसी भी तरह से अवगत नहीं हूं, हम एशिनक पाइप का इस्तेमाल सुरक्षित नेविगेशन ऑपरेटर के साथ मिलकर कर सकते हैं:

 {{(objectData$ | async)?.name}} 

लेकिन यह जटिल दिखता है, और हमें उस प्रत्येक ऑब्जेक्ट प्रॉपर्टी के लिए दोहराना होगा जो हम प्रदर्शित करना चाहते थे।

इसके बजाय, मेरा सुझाव है कि हम नियंत्रक में देखे जाने वाले subscribe() को subscribe() और निहित ऑब्जेक्ट को घटक संपत्ति में संग्रहीत करें। हम तब टेम्प्लेट में सुरक्षित नेविगेशन ऑपरेटर (?) या (टिप्पणी के रूप में दिए गए एवन प्लैस के अनुसार) एनजीआईएफ का इस्तेमाल करते हैं। यदि हम सुरक्षित नेविगेशन ऑपरेटर या एनजीआईएफ का उपयोग नहीं करते हैं, तो एक त्रुटि तब फेंक दी जाएगी जब टेम्प्लेट पहले रेंडर करने का प्रयास करता है, क्योंकि ऑब्जेक्ट अभी तक किसी मूल्य के साथ नहीं आ रहा है।

नोट करें कि नीचे दिए जाने वाली सेवा प्रत्येक प्राप्त विधियों के लिए हमेशा एक अवलोकन देता है।

service.ts

 import {Injectable} from 'angular2/core'; import {Http} from 'angular2/http'; import 'rxjs/add/operator/map'; // we need to import this now @Injectable() export class MyService { constructor(private _http:Http) {} getArrayDataObservable() { return this._http.get('./data/array.json') .map(data => data.json()); } getPrimitiveDataObservable() { return this._http.get('./data/primitive.txt') .map(data => data.text()); // note .text() here } getObjectDataObservable() { return this._http.get('./data/object.json') .map(data => data.json()); } } 

app.ts

 import {Component} from 'angular2/core'; import {MyService} from './my-service.service'; import {HTTP_PROVIDERS} from 'angular2/http'; @Component({ selector: 'my-app', providers: [HTTP_PROVIDERS, MyService], template: ` <div>array data using '| async': <div *ngFor="#item of arrayData$ | async">{{item}}</div> </div> <div>primitive data using '| async': {{primitiveData$ | async}}</div> <div>object data using ?.: {{objectData?.name}}</div> <div *ngIf="objectData">object data using NgIf: {{objectData.name}}</div>` }) export class AppComponent { constructor(private _myService:MyService) { console.clear(); } ngOnInit() { this.arrayData$ = this._myService.getArrayDataObservable(); this.primitiveData$ = this._myService.getPrimitiveDataObservable(); this._myService.getObjectDataObservable() .subscribe(data => this.objectData = data); } } 

नोट: मैं सेवा पद्धति के नामों में "अवलोकन" रखता हूं – जैसे, getArrayDataObervable() – सिर्फ उस हाइलाइट को उजागर करने के लिए कि विधि एक अवलोकन करती है आम तौर पर आप नाम पर "अवलोकन" नहीं करेंगे।

डेटा / array.json

 [ 1,2,3 ] 

डेटा / primitive.json

 Greetings SO friends! 

डेटा / object.json

 { "name": "Mark" } 

आउटपुट:

 array data using '| async': 1 2 3 primitive data using '| async': Greetings SO friends! object data using .?: Mark object data using NgIf: Mark 

Plunker


async पाइप का उपयोग करने में एक दोष यह है कि घटक में सर्वर त्रुटियों को संभालने के लिए कोई तंत्र नहीं है। मैंने एक और सवाल का उत्तर दिया जो बताता है कि घटक में ऐसी त्रुटियों को कैद कैसे किया जाए, लेकिन हमें इस मामले में subscribe() आवश्यकता है subscribe()