इंजेक्शन त्रुटि: सभी पैरामीटर को हल नहीं कर सकता

Question

मुझे सेवा को PanelsService में इंजेक्ट करने का प्रयास करते समय यह त्रुटि मिल रही है।

import {Component} from 'angular2/core'; 
import {Http} from 'angular2/http'; 

export class PanelsService { 

    constructor(public http:Http) { } 

    getPanelFilters() { 
    var url = '../../data/panelFilters/' + 13677 + '.json' 

    return this.http.get(url) 
    } 

} 

मैं अपने SidebarComponent से PanelsService तक पहुंचने का प्रयास कर रहा हूँ:

import {PanelsService} from '../panels/panels.service'; 

@Component({ 
    .... 
    providers: [PanelsService] 
}) 

export class SidebarComponent implements OnInit { 

    constructor(public panelsService:PanelsService) { } 

    ngOnInit() { 
    console.log('I am the sidebar component'); 
    } 

} 

ऐसा लगता है मेरी tsconfig.json भी लाइनों है कि:

"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 

मैं का उपयोग कर की कोशिश की है @Injectable जैसा कि here दिखाया गया है, लेकिन जब मैं @Injectable() के साथ अपनी कक्षा को सजाने के लिए मुझे विपक्ष में एक त्रुटि मिलती है OLE:

boot.js बस मेरे ऐप घटक bootstraps, यह किसी भी निर्भरता इंजेक्षन नहीं करता है:

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from './components/app.component'; 

bootstrap(AppComponent).catch(err => console.error(err)); 

किसी भी मदद की सराहना की जाएगी।

Answer 1

आपके कोड में एक चीज़ गायब है: प्रदाता।

साथ

export class PanelsService { 

    constructor(public http:Http) { } 
} 

आप एक निर्भरता कि इंजेक्टर टोकन Http (प्रकार एनोटेशन) के साथ दिखाता है के लिए पूछना

। हालांकि, आपके कोड में कुछ भी नहीं है (कम से कम यहां दिखाया गया है), जो आपके इंजेक्टर को बताता है कि को टोकन Http के लिए वापस जाना होगा। तो यह जानकारी का केवल आधा है।

निर्भरता को हल करने के लिए हमें एक टोकन (जिस चीज़ के लिए हम पूछ रहे हैं) और एक प्रदाता (वह वस्तु जो उस वस्तु को बनाती है जिसे हम पूछ रहे हैं) की आवश्यकता होती है। @Component() सजावट में providers संपत्ति का उपयोग कर प्रदाता को bootstrap() या घटक स्तर पर कॉन्फ़िगर किया जा सकता है।

जब तक आप हर बार Http का नया उदाहरण नहीं बनाना चाहते हैं, तो यह पूरे प्रदाता में एक ही उदाहरण उपलब्ध कराने के लिए उस प्रदाता को bootstrap() पर कॉन्फ़िगर करने के लिए सबसे अधिक समझ में आता है।

import {provide} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {Http} from 'angular2/http'; 

bootstrap(YourApp, [ 
    provide(Http, {useClass: Http}) 
]); 

provide() एक टोकन Http लेता है और एक नुस्खा का वर्णन करता है कि कुछ (useClass: Http) के एक वस्तु बनाने के लिए कैसे के साथ एक प्रदाता कॉन्फ़िगर करता है:

यहाँ Http के लिए एक प्रदाता दिखाई दे सकता है की तरह है।

bootstrap(YourApp, [ 
    Http 
]); 

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

HTTP_PROVIDERS प्रदाता कॉन्फ़िगरेशन का संग्रह है जो Http काम करने के लिए आवश्यक है। तो तुम सब करने की है:

import {HTTP_PROVIDERS} from 'angular2/http'; 

bootstrap(YourApp, [HTTP_PROVIDERS]); 

फिर से अपनी एप्लिकेशन कुछ भी Http के लिए के बारे में सभी निर्भरता, टोकन और प्रदाताओं को जानता है।

आप इस article में एक और विस्तृत स्पष्टीकरण पा सकते हैं।