Question

我正在尝试按照此Ng Conf视频实现服务类 Angular 1.3符合Angular 2.0 - MichałGołębiowski：

我一直收到这个错误：

var angular = window['angular'];
angular
    .module('myApp', [])
    .service('myService', [MyService])
    .directive('test', function (myService) {
        return {
            restricts: 'E',
            template: 'Directive output: {{ctrl.message}}',
            controllerAs: 'ctrl',
            controller: function () {
                this.message = myService.message;
            }   
        }
    });

/*
// Works
function MyService () {
  return {
      message: "service test"
    }
}
*/

// Does not work
class MyService {
  public message:string;
  constructor () {
    this.message = "service test by class";
  }
}

以下代码：

.service('myService', function () {return new MyService()})

http://codepen.io/AshCoolman/pen/PPLONm?editors=001

编辑：解决方案

简单包装这个类是有效的，现在就可以了：

{{1}}

实际上我现在想起来似乎很直接。示例视频使用es6或许使用Babel，而我正在使用Typescript。猜测，Typescript / Tracuer可能会采取不同的做法。我今晚稍后会对此进行调查并发表完整的解释。

编辑：说明

Martin Vseticka打败了我，见下文。

Answer 1

该行

.service('myService', [MyService])

应该是

.service('myService', MyService)

编辑：解决方案更简单我猜:-)方法

function MyService () {
  return {
      message: "service test"
    }
}

有效，因为JavaScript中的函数为hoisted。

但是，以下TypeScript代码

class MyService {
  public message:string;
  constructor () {
    this.message = "service test by class";
  }
}

被描述为：

var MyService = (function () {
    function MyService() {
        this.message = "service test by class";
    }
    return MyService;
})();

这意味着.service('myService', MyService)无效，因为此时MyService未定义（即MyService = undefined）！

在angular 1.4.7中使用typescript类进行服务

1 个答案: