Verwendung der Dependency-Injektion mit Typoskript in AngularJs

Question

Ich konvertiere eine Komponente (AngularJS 1.6) von JavaScript zu Typoskript.

class NewProjectCtrl { 
    price: number; 

    static $inject = ['$http']; 

    constructor($http) { 
     let ctrl = this; 
     ctrl.price = '50'; 
     ... 
    } 

    createProject() { 
     $http.post('/api/project', ctrl.project) 
     ... 
    } 
} 

angular 
    .module('app.projects-selection') 
    .component('newProject', { 
     templateUrl: 'app/projects-selection/components/new-project/new-project.tmpl.html', 
     controller: NewProjectCtrl, 
     bindings: { 
      user: '<', 
     } 
    }); 

Typoskript auf dem $http in meinem createProject Verfahren klagt (Kann nicht Namen $ http). Alle Beispiele, die ich finden kann, verwenden nur Abhängigkeitsinjektionen im Konstruktor.

Answer 1

Sie this vergessen haben. Nach der Injektion auch Verwendung this.$http

lassen Sie mich schlägt Ihnen einigen Ansatz nach Styleguides:

namespace myNameSpace { 

    class NewProjectCtrl { 
    private static $inject = ['$http']; 

    public price: number; 

    constructor(private $http) {} 

    createProject() { 
     this.$http.post('/api/project', ctrl.project) 
    } 
    } 

    class NewProjectComponent implements ng.IComponentOptions { 
    constructor() { 
     this.bindings: { 
     user: '<', 
     }; 
     this.templateUrl: 'app/projects-selection/components/new-project/new-project.tmpl.html'; 
     this.controller: NewProjectCtrl; 
    } 
    } 

    angular 
    .module('app.projects-selection', []) 
    .component('newProject', new NewProjectCtrl()); 
} 

Answer 2

Sie erstellen eine Klasse, keine bloße Funktion. $http wird in Ihre constructor Funktion injiziert und existiert dort, aber es ist nicht in createProject vorhanden. Sie müssen es auf die Instanz als Eigentum speichern:

private $http; // should be declared first too, preferably with type hint 

constructor($http) { 
    this.$http = $http; 
} 

createProject() { 
    this.$http.post('/api/project', ctrl.project) 
} 

Typoskript eine Abkürzung für das hat:

constructor(private $http) { 
} 

createProject() { 
    this.$http.post('/api/project', ctrl.project) 
} 

let ctrl = this scheint auch ziemlich seltsam, ich glaube nicht, dass sehr viel Sinn macht. Ich weiß nicht, was sonst Sie im Konstruktor tun, aber ich würde Refactoring, was Sie dieses:

class NewProjectCtrl { 
    price: number = 50; 

    static $inject = ['$http']; 

    constructor(private $http) { } 

    createProject() { 
     this.$http.post('/api/project', ctrl.project); 
    } 
}