AngularJsでtypescriptとの依存性注入を使用する

Question

コンポーネント（AngularJS 1.6）をjavascriptからtypescriptに変換しています。活字は私のcreateProject方法で$httpに文句

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: '<', 
     } 
    }); 

（名$ HTTPを見つけることができません）。私が見つけることができるすべての例は、コンストラクタで依存関係注入を使用するだけです。

Answer 1

。

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

あなたは単なる機能ではなく、クラスを作成しています。 $httpがconstructor関数に注入され、そこに存在しますが、ではなく、がcreateProjectに存在します。あなたは、プロパティとしてインスタンス上に格納する必要があります：

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

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

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

活字体は、そのための速記を持っています

constructor(private $http) { 
} 

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

let ctrl = this

もかなり奇妙なようで、私はそれは多くの意味を作るとは思いません。私はあなたがコンストラクタでやっている他に何か分からないが、私はあなたがこれに持っているものリファクタリングしたい：あなたは thisを忘れてきた

class NewProjectCtrl { 
    price: number = 50; 

    static $inject = ['$http']; 

    constructor(private $http) { } 

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