我是 typescript 和 angular Js 的新手。我找不到正确的答案，我的代码如下:
export class SidenavController {
static $inject = ['$scope', '$mdSidenav'];
constructor(private $scope: any,private $mdSidenav: any) {
}
toggleSidenav(name: string) {
this.$mdSidenav(name).toggle();
}
loadHelpInfo() {
this.helpService.loadAll()
.then(function(help) {
this.$scope.helpInfo = [].concat(help);
this.$scope.selected = this.$scope.helpInfo[0];
})
}
selectHelpInfo(help) {
this.$scope.selected = angular.isNumber(help) ? this.$scope.helpInfo[help] : help;
this.$scope.toggleSidenav('left');
}
}
app.service('helpService', ['$q', function($q) {
var helpInfo = [{
name: 'Introduction',
content: '1 '
}, {
name: 'Glossary',
content: '2'
}, {
name: 'Log In',
content: '3'
}, {
name: 'Home Page',
content: '4'
}];
return {
loadAll: function() {
return $q.when(helpInfo);
}
};
}]);
在上面的代码中，我想使用 helpService 在屏幕上加载详细信息。 执行时出现以下错误: app/components/sidenav/sidenav-controller.ts(10,10):错误 TS2339:属性“helpService”在类型“SidenavController”上不存在。 我不确定如何在 typescript 中使用服务。 另外，如果需要，我已经完成了 Angular 的代码笔版本:
http://codepen.io/snehav27/pen/JdNvBV
基本上我正在尝试做上面片段的 typescript 版本
最佳答案
您需要注入(inject) helpservice 并将其设置在您的构造函数参数中。
static $inject = ['$scope', '$mdSidenav', 'helpService'];
constructor(private $scope: any,private $mdSidenav: any, private helpService:any) {
}
否则 Typescript 不知道您指的是什么 this.helpService，即使没有 TS，当您尝试执行 this.helpService.loadAll 时也会导致错误> 出现“无法访问 loadAll of undefined”错误或类似错误。
还使用箭头运算符来解析词法范围的 this @
this.helpService.loadAll()
.then((help) => { //<-- here
this.$scope.helpInfo = [].concat(help);
this.$scope.selected = this.$scope.helpInfo[0];
});
否则会导致另一个错误，因为 this 不会是回调中的 Controller 实例。
您还可以为 helpService 创建一个类型，以便更好地使用并减少任何拼写错误。
export interface IHelpService{
loadAll():ng.IPromise<Array<HelpInfo>>; //use specific typing instead of any
}
export interface HelpInfo{
name:string;
content:string;
}
class HelpService implements IHelpService{
private _helpInfo:Array<HelpInfo> = [{
name: 'Introduction',
content: '1 '
}, {
name: 'Glossary',
content: '2'
}, {
name: 'Log In',
content: '3'
}, {
name: 'Home Page',
content: '4'
}];
static $inject = ['$q'];
constructor(private $q:ng.IQService){
}
loadAll(){
return this.$q.when(this._helpInfo);
}
}
angular.module('HelpApp').service('helpService', HelpService);
和
constructor(private $scope: any,private $mdSidenav: any, private helpService:IHelpService) {
最好将 Controller 用作 Typescript 类定义的语法，并完全摆脱将属性附加到范围。您现在拥有的是半成品(功能附加到 Controller 实例和一些属性范围)。
export class SidenavController {
helpInfo:Array<HelpInfo>;
selected:HelpInfo;
static $inject = ['$mdSidenav', 'helpService'];
constructor(private $mdSidenav: any, private helpService:IHelpService) {}
toggleSidenav(name: string) {
this.$mdSidenav(name).toggle();
}
loadHelpInfo() {
this.helpService.loadAll()
.then((help) => {
this.helpInfo = [].concat(help);
this.selected = this.helpInfo[0];
})
}
selectHelpInfo(help) {
this.selected = angular.isNumber(help) ? this.helpInfo[help] : help;
this.toggleSidenav('left');
}
}
在你看来:
<body layout="column" ng-controller="AppCtrl as vm">
并引用以vm 为前缀的属性和方法(您可以使用任何别名，我只使用vm)。示例(您应该能够计算出休息时间):-
<md-item ng-repeat="it in vm.helpInfo">
<--- some code -->
<md-button ng-click="vm.selectHelpInfo(it)"
ng-class="{'selected' : it === vm.selected }">
关于angularjs - 如何在 typescript 中使用 angularjs app.service 和 $q，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30741444/