Uncaught TypeError: this.jsonp.request ist keine Funktion in Angular2

Question

Ich erhalte den folgenden Fehler. Uncaught TypeError: this.jsonp.request ist keine Funktion in Angular2. Kann mir bitte jemand helfen, das zu beheben.

Mein Code wird dies mag:

1. RequestService.ts

   import {Component} from '@angular/core'; 
   import {JSONP_PROVIDERS, Jsonp,RequestMethod, RequestOptions, URLSearchParams,JSONP_BINDINGS, BaseRequestOptions} from '@angular/http'; 
   import {Injectable} from '@angular/core'; 
   import 'rxjs/add/operator/map'; 
   
   @Injectable() 
   
   @Component({ 
       providers: [JSONP_PROVIDERS] 
   }) 
   
   export class RequestService {  
       constructor(public jsonp?:Jsonp) { 
       this.jsonp = Jsonp; 
       } 
   
   getValues = (url) => { 
   let _urlParams = new URLSearchParams(); 
   _urlParams.set('contentType', 'application/jsonp; charset=utf-8'); 
   _urlParams.set('dataType', 'jsonp'); 
   _urlParams.set('timeout', '5000');  
   
   this.jsonp.request(url + "&callback=JSONP_CALLBACK", {  // getting error here 
       contentType: "application/jsonp; charset=utf-8", 
       dataType: 'jsonp', 
       timeout: 5000 
   }) 
       .map(res => {     
        return res.json(); 
       }) 
       .subscribe(res => { 
        // here some stuffs with response 
       }), err => { 
       console.log('error') 
   }; 
   
   } 
   } 
   

2. abc.ts

   import {RequestService}   from './../request_service'; 
   
   export class ABC { 
       private request:any = new RequestService(); 
   
       bindValues() { 
       this.request.getValues('http://google.co.in'); // note: url given here is sample 
        } 
       } 
   

Vielen Dank im Voraus

Answer 1

Das Problem ist in dieser Zeile:

constructor(public jsonp?:Jsonp) { 
    this.jsonp = Jsonp; // <---- 
} 

Mit dem öffentlichen oder privaten Stichwort, müssen Sie nicht die Eigenschaft festlegen müssen. Darüber hinaus stellen Sie die Klasse und nicht den Konstruktor Parameter ...

Versuchen Sie Folgendes:

constructor(public jsonp?:Jsonp) { 
} 

bearbeiten

Ich glaube, Sie ein Problem mit Ihrem Dekorateure haben. Im Servicefall benötigen Sie nur die @Injectable, nicht die @Component (nur für Komponenten).

So würde ich die folgenden:

@Injectable() 
export class RequestService {  
    constructor(public jsonp?:Jsonp) { 
    } 

    (...) 
} 

Stellen Sie die Anbieter, wenn die Anwendung Bootstrapping:

bootstrap(AppComponent, [ JSONP_PROVIDERS ]); 

diese Frage Siehe:

• JSONP call => ReferenceError : document is not defined

Um zu verstehen, wie Abhängigkeiten in Dienste zu injizieren, können Sie einen Blick auf diese Frage haben die beschreiben, wie hierarchische Injektoren arbeiten:

• What's the best way to inject one service into another in angular 2 (Beta)?