Как angularjs app.service и $ q в машинописных текстах

Question

Я очень новичок в машинописных и угловых 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: Property 'helpService' не существует в типе 'SidenavController'. Я не уверен, как использовать службы в машинописном тексте. Кроме того, при необходимости я сделал codepen версию угловой:

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

В основном я пытаюсь сделать машинопись версию выше фрагмент кода

Answer 1

Вы должны вводить helpservice и установить его в аргумент конструктора.

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

    } 

иначе Машинопись не знает, что вы имеете в виду, как this.helpService, даже без TS это приведет к ошибке при попытке сделать this.helpService.loadAll с «не может получить доступ к Loadall неопределенной» ошибки или аналогичный.

использовать также оператор Arrow для решения лексической области видимости this @

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

в противном случае это приведет к другой ошибке, поскольку this обыкновение быть экземпляр контроллера внутри обратного вызова.

Вы также можете создать ввод для 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) { 

Было бы лучше использовать контроллер как синтаксис с машинопись класса 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 }">