Question

我的目标是使用依赖注入常量值（基本URL）来定义组件的templateUrl属性。到目前为止，没有任何工作。下面的代码在Typescript

中

一些解释：app.core.Iconstants保存baseUrl值。 app.core.AngularGlobals.appCoreConstants是表示＆＃34; app.core.Constants＆＃34;的字符串。

请注意，我只是削减了Angular的牙齿。

namespace donationEntry.Components { ＆＃34;使用严格的＆＃34 ;;

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未捕获错误：[$ injector：modulerr]由于以下原因导致无法实例化模块应用程序：错误：[$ injector：modulerr]无法实例化模块donationEntry，原因如下： TypeError：t.charAt不是函数

Answer 1

这似乎有效，但我不会称之为最有说服力的答案。再次，写在Typescript：

namespace donationEntry.Components { “使用严格”;

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

我尽可能地远离Angular的注射或模块机制，而不是直接使用ES6。

你可以这样做：

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

然后像这样导入：

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

Angular 1.5 Component - 依赖注入

2 个答案: