Question

所以，我正在尝试使用1.5组件功能，但使用胖箭头进行编码。我正在使用babel构建系统

因此，我的组件被剥离到最低限度以显示我的问题：

angular.module('myApp')
  .component('myComponent', {
        controller: () => {
            this.$onInit = () => {};
        },

        template: `<p>foobar1</p>`
    });

当我尝试加载此组件时，我收到错误抱怨

typeError: Cannot set property '$onInit' of undefined

所以，当我查看chrome devtools中的来源时，我看到了

angular.module('myApp').component('myComponent', {
/** @ngInject */
controller: function controller() {
    undefined.$onInit = function () {};
},
template: '<p>foobar1</p>'

}）;

我希望我做错了什么，但看不到它;）

任何人都有任何提示？

感谢

Answer 1

Angular为每个组件创建新的控制器实例。在ES5中我们没有类，所以我们在这里传递构造函数。

但是在es6中我们有课程，所以你可以用它代替

let myComponent = {
    controller: myComponentController,
    template: `<p>foobar1</p>`
};

class myComponentController{
  constructor() {
    this.answer = 41;
  }
  $onInit() {
    this.answer++;
  }
};

angular.module('myApp')
  .component('myComponent', myComponent);

Pascal还在这里写了一些内容：http://blog.thoughtram.io/angularjs/es6/2015/01/23/exploring-angular-1.3-using-es6.html

角度1.5分量和巴贝尔

1 个答案: