角度1.5コンポーネント依存性注入

Question

私の目標は、コンポーネントのtemplateUrlプロパティの定義に使用する定数値（ベースURL）の依存性注入を使用することでした。これまでのところ何も働いていません。下のコードはTypescriptにあります

説明：app.core.IconstantsはbaseUrl値を保持しています。 app.core.AngularGlobals.appCoreConstantsは、「app.core.Constants」を表す文字列です。

私はちょうどあなたの歯を角切りしています。

名前空間donationEntry.Components { "use strict";

class test1 implements ng.IComponentOptions { 
    public static id: string = AngularGlobals.donationEntry + ".test1"; 
    bindings: any; 
    controller: any; 
    templateUrl: string; 

    constructor(clientContext: app.core.IConstants) { 
     this.bindings = { 
      textBinding: '@', 
      dataBinding: '<', 
      functionBinding: '&' 
     }; 
     this.controller = TestController; 
     this.templateUrl = clientContext.baseUrl + "Areas/ng/app/fundraising/donationEntry/components/test1/test1.html"; 
    } 
} 

// register the controller with app 
angular.module(AngularGlobals.donationEntry) 
    .component("test1", [app.core.AngularGlobals.appCoreConstants, (c) => new test1(c)]); 

}

私はこれを実行すると、私は次のエラーで終わる：

angular.js：61不明なエラー：[$インジェクター：modulerr]は起因するモジュールのアプリをインスタンス化に失敗しました： エラー：[$インジェクター：modulerr]起因するモジュールdonationEntryをインスタンス化できませんでした： 例外TypeError：私は答えの最も雄弁にそれを呼び出すことはありませんけれどもt.charAtは関数ではありません

Answer 1

これは、動作しているように見えます。繰り返しますが、Typescriptで書かれています：

名前空間donationEntry.Components { "use strict";

class test1 implements ng.IComponentOptions { 
    public static id: string = AngularGlobals.donationEntry + ".test1"; 
    bindings: any; 
    controller: any; 
    templateUrl: string; 


    constructor(clientContext: app.core.IConstants) { 
     this.bindings = { 
      textBinding: '@', 
      dataBinding: '<', 
      functionBinding: '&' 
     }; 
     this.controller = TestController; 
     this.templateUrl = clientContext.baseUrl + "Areas/ng/app/fundraising/donationEntry/components/test1/test1.html"; 
    } 
} 

// register the controller with app 
var clientContext = <app.core.IConstants>angular.injector(['ng', app.core.AngularGlobals.appCore]).get(app.core.AngularGlobals.appCoreConstants); 
angular.module(AngularGlobals.donationEntry) 
    .component("test1", new test1(clientContext)); 

}

Answer 2

私は、ストレートES6を好むことができたときに離れて角度の注射またはモジュールメカニズムから滞在してみてください。

あなたは行うことができます。

//clientContext.ts 
export = { baseUrl: 'whateva' } 

をし、このようにインポートします。

import clientContext from './path/to/clientContext'