我正在使用带有Typescript的1.4.9 Angularjs开发一个应用程序。
我有一个注入了testManagementService服务的控制器,testManagementService变量是构造函数中的一个对象,但是在调用它的方法中它是未定义的。奇怪的是,我在另一个控制器中使用另一个服务进行相同的设置,并且工作正常。
问题:
到目前为止我做了什么:
服务:
module sayusiando.gonogo.web.spa.service {
import IGeneralTestSuitTestCaseContract = sayusiando.gonogo.web.spa.common.contracts.IGeneralTestSuitTestCaseContract;
"use strict";
export interface ITestManagementService {
getTestSuitTree(): ng.IPromise<IGeneralTestSuitTestCaseContract[]>;
}
class TestManagementService implements ITestManagementService {
//#region ctor
constructor(
private Restangular: restangular.IService
) { }
//#endregion
public getTestSuitTree(): ng.IPromise<IGeneralTestSuitTestCaseContract[]> {
var resource = this.Restangular.all("TestSuite/GetTestSuiteTree");
return <any>resource.getList();
}
}
factory.$inject = ["Restangular"];
function factory(Restangular: restangular.IService) {
return new TestManagementService(Restangular);
}
angular
.module("goNoGo")
.factory("testManagementService", factory);
}
控制器:
module sayusiando.gonogo.web.spa.mainpage.showtestsuittree.controllers {
import IGeneralTestSuitTestCaseContract = sayusiando.gonogo.web.spa.common.contracts.IGeneralTestSuitTestCaseContract;
import DataSourceTransport = kendo.data.DataSourceTransport;
import DataSourceSchema = kendo.data.DataSourceSchema;
import DataSourceSchemaModelFields = kendo.data.DataSourceSchemaModelFields;
import TestManagementService = sayusiando.gonogo.web.spa.service.ITestManagementService;
"use strict";
export interface IShowTestSuitTreeController {
activate: () => void;
}
class ShowTestSuitTreeController implements IShowTestSuitTreeController {
//#region Variables
testSuiteTree = [];
testSuiteTreeKendoTreeListOptions: kendo.ui.TreeListOptions = {};
//#endregion
//#region Inject and ctor
static $inject: string[] = ['testManagementService'];
constructor(
private testManagementService: gonogo.web.spa.service.ITestManagementService
) {
console.log('testmgmgservice', testManagementService);
this.activate();
}
//#endregion
activate(): void {
var dataSourceTransport = <DataSourceTransport>{
read: this.readRepository
};
var schema: DataSourceSchema = <DataSourceSchema>{
model: {
id: "id",
parentId: "parentId",
fields: <DataSourceSchemaModelFields>{
id: { type: "number", editable: false, nullable: true },
name: { type: "string", editable: false, nullable: true }
}
}
};
var dataSource = new kendo.data.TreeListDataSource({
transport: dataSourceTransport,
schema: schema,
batch: true
});
var idColumn: kendo.ui.TreeListColumn = <kendo.ui.TreeListColumn>{
field: "id",
width: "100px"
};
var nameColumn: kendo.ui.TreeListColumn = <kendo.ui.TreeListColumn>{
field: "name",
width: "400px"
};
this.testSuiteTreeKendoTreeListOptions.dataSource = dataSource;
this.testSuiteTreeKendoTreeListOptions.sortable = false;
this.testSuiteTreeKendoTreeListOptions.editable = false;
this.testSuiteTreeKendoTreeListOptions.columns = [
idColumn,
nameColumn
];
}
readRepository(e): any {
console.log('testmgmt2', this.testManagementService);
this.testManagementService.getTestSuitTree().then((result: Array<IGeneralTestSuitTestCaseContract>): void => {
e.success(result);
}, (reason: any): void => {
e.error(reason);
});
return e;
}
}
angular
.module("goNoGo")
.controller("showTestSuitTreeController", ShowTestSuitTreeController);
}
从控制器生成的javascript :
var sayusiando;
(function (sayusiando) {
var gonogo;
(function (gonogo) {
var web;
(function (web) {
var spa;
(function (spa) {
var mainpage;
(function (mainpage) {
var showtestsuittree;
(function (showtestsuittree) {
var controllers;
(function (controllers) {
"use strict";
var ShowTestSuitTreeController = (function () {
function ShowTestSuitTreeController(testManagementService) {
this.testManagementService = testManagementService;
//#region Variables
this.testSuiteTree = [];
this.testSuiteTreeKendoTreeListOptions = {};
console.log('testmgmgservice', testManagementService);
this.activate();
}
//#endregion
ShowTestSuitTreeController.prototype.activate = function () {
var dataSourceTransport = {
read: this.readRepository
};
var schema = {
model: {
id: "id",
parentId: "parentId",
fields: {
id: { type: "number", editable: false, nullable: true },
name: { type: "string", editable: false, nullable: true }
}
}
};
var dataSource = new kendo.data.TreeListDataSource({
transport: dataSourceTransport,
schema: schema,
batch: true
});
var idColumn = {
field: "id",
width: "100px"
};
var nameColumn = {
field: "name",
width: "400px"
};
this.testSuiteTreeKendoTreeListOptions.dataSource = dataSource;
this.testSuiteTreeKendoTreeListOptions.sortable = false;
this.testSuiteTreeKendoTreeListOptions.editable = false;
this.testSuiteTreeKendoTreeListOptions.columns = [
idColumn,
nameColumn
];
};
ShowTestSuitTreeController.prototype.readRepository = function (e) {
console.log('testmgmt2', this.testManagementService);
this.testManagementService.getTestSuitTree().then(function (result) {
e.success(result);
}, function (reason) {
e.error(reason);
});
return e;
};
//#endregion
//#region Inject and ctor
ShowTestSuitTreeController.$inject = ['testManagementService'];
return ShowTestSuitTreeController;
})();
angular
.module("goNoGo")
.controller("showTestSuitTreeController", ShowTestSuitTreeController);
})(controllers = showtestsuittree.controllers || (showtestsuittree.controllers = {}));
})(showtestsuittree = mainpage.showtestsuittree || (mainpage.showtestsuittree = {}));
})(mainpage = spa.mainpage || (spa.mainpage = {}));
})(spa = web.spa || (web.spa = {}));
})(web = gonogo.web || (gonogo.web = {}));
})(gonogo = sayusiando.gonogo || (sayusiando.gonogo = {}));
})(sayusiando || (sayusiando = {}));
//# sourceMappingURL=showTestSuitTreeController.js.map
答案 0 :(得分:1)
我很确定问题是你在这里将函数引用传递给框架:
var dataSourceTransport = <DataSourceTransport>{
read: this.readRepository
};
这样做,你正在失去上下文(这个)。当库调用readRepository函数时,它不再适用于事先定义函数的上下文。因此,调用函数时testManagementService
上不存在this
。
您可以通过绑定到正确的上下文来解决此问题:
var dataSourceTransport = <DataSourceTransport>{
read: this.readRepository.bind(this)
};
或通过参考
时使用箭头功能捕获它 var dataSourceTransport = <DataSourceTransport>{
read: (e) => this.readRepository(e)
};
或通过使回调成为箭头函数本身,保持注册不变。请注意其含义,因为该功能不再在原型上注册。
readRepository = (e) => {
...
}
有关详细信息,请查看https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html