如何在打字稿中使用angularjs app.service和$q

发布时间：2020-12-17 16:56:52 所属栏目：安全来源：网络整理

导读：我对打字稿和棱角分明的Js很新.我无法找到正确的答案,我的代码如下： export class SidenavController {static $inject = ['$scope','$mdSidenav']; constructor(private $scope: any,private $mdSidenav: any) { }toggleSidenav(name: string) { this.$mdSi

我对打字稿和棱角分明的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：类型’SidenavController’上不存在属性’helpService’.
我不知道如何在打字稿中使用服务.
如果需要,我也完成了角度的codepen版本：

http://codepen.io/snehav27/pen/JdNvBV

基本上我正在尝试做上面代码段的打字稿版本

解决方法

您需要注入helpservice并在构造函数参数中设置它.

static $inject = ['$scope','$mdSidenav','helpService'];
     constructor(private $scope: any,private $mdSidenav: any,private helpService:any) {

     }

否则,Typescript不知道你指的是什么this.helpService,即使没有TS,当你尝试这样做时也会导致错误.帮助客户端无法访问“未定义的loadAll”错误或类似错误.

也可以使用Arrow运算符来解决词法范围这个@

this.helpService.loadAll()
  .then((help) => { //<-- here
    this.$scope.helpInfo = [].concat(help);
    this.$scope.selected = this.$scope.helpInfo[0];
  });

否则会导致另一个错误,因为这不会是回调内的控制器实例.

您还可以为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: '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 helpService:IHelpService) {

最好将控制器用作Typescript类defn的语法,并完全摆脱将属性附加到范围.你现在所拥有的是半生不熟的(附加到控制器实例的函数和一些属性到范围).

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 }">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!