using eckig 2 HTTP-Client in es5

Question

Wir versuchen, unsere eckige 1 App zu eckigen 2 Modul für Modul zu aktualisieren; Da unser bestehendes Projekt auf es5 basiert, haben wir uns entschlossen, das gleiche mit eckigen 2 zu verwenden. Wir haben bisher upgradeAdapter und DI in gewissem Umfang herausgefunden, aber es scheint einen Haken bei der Verwendung von http-Client zu haben. Hier ist der Code:

HTML

Alle js Dateien im Zusammenhang mit NG2 in ng2.js zu erhalten verketteten

ng2.js

app = giddh.webApp; 

class diTest { 
    constructor(){ 
    } 

    get(){ 
    return 'injected from diTest'; 
    } 
}; 

console.log(ng.http) 

app.AppComponent = 
    ng.core.Component({ 
    selector: 'my-app', 
    providers: [diTest, ng.http.HTTP_PROVIDERS], 
    templateUrl: '/public/webapp/ng2/audit_logs/audit-logs.html' 
    }) 
    .Class({ 
    constructor:[diTest,ng.http.HTTP_PROVIDERS, function(di, http) { 
     this.test = di.get(); 
     this.result = {}; 
     this.http = http; 
     this.mapPeople().subscribe(function(result){ 
     this.result = result; 
     }.bind(this)); 
    }], 
    mapPeople: function(){ 
     return this.http.get('people.json').map(function (res) { 
       return res.json(); 
     }); 
    } 
}); 

})() 



var upgradeAdapter = new ng.upgrade.UpgradeAdapter(); 

angular.element(document.body).ready(function() { 
    upgradeAdapter.bootstrap(document.body, ['giddhWebApp']); 
}); 

// downgrade ng2 components to ng1 directives 
app.directive('myApp',  upgradeAdapter.downgradeNg2Component(app.AppComponent)); 

Der Fehler ich in Die Konsole ist:

Instantiati onError {_wrapperMessage: "DI-Ausnahme", _originalException: TypeError: this.http.get ist keine Funktion bei app.AppComponent.ng.core.Component.Class.mapPeople ..., _originalStack: "TypeError: this.http.get ist keine Funktion bei ... 0 [als viewFactory] (viewFactory_Hostclass0: 73: 25) ", _context: null, _wrapperStack:" Fehler: DI Exception "bei InstantiationError.Wrap ... ngular2/bundles/angular2-all.umd.dev.js : 16347: 37) "...}‚‘

Vielen Dank im Voraus :)

Answer 1

Sie benötigen Http Instanz HTTP_PROVIDERS an den Konstruktor Ebene zu spezifizieren, da sie entspricht nur dem Typ des Objekts, das Sie erwarten zu injizierenden im Konstruktor:

.Class({ 
    constructor:[diTest,ng.http.Http, function(di, http) { // <--------- 
    this.test = di.get(); 
    this.result = {}; 
    this.http = http; 
    this.mapPeople().subscribe(function(result){ 
     this.result = result; 
    }.bind(this)); 
    }], 

HTTP_PROVIDERS muss nur definiert werden, wenn Ihr Provider konfigurieren:

ng.core.Component({ 
    selector: 'my-app', 
    providers: [diTest, ng.http.HTTP_PROVIDERS], 
    templateUrl: '/public/webapp/ng2/audit_logs/audit-logs.html' 
}) 

dieses plunkr Siehe: https://plnkr.co/edit/3bNQkXNXZVXoPxPF3tiy?p=preview.