Angularjs 角度1.5分量和巴别塔

所以，我尝试使用1.5组件特性，但使用粗箭头编码。我正在使用巴贝尔来构建系统

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

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

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

因此，当我查看chrome开发工具中的源代码时，我看到

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

angular.module（'myApp'）.component（'myComponent'{
/**@ngInject*/
控制器：函数控制器（）{
未定义。$onInit=函数（）{}；
},
模板：“foobar1
”

}))

我本以为我做错了什么，但却看不出来；）

有人有什么建议吗

---

感谢

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);

让myComponent={
控制器：myComponentController，
模板：`foobar1
`
};
类myComponentController{
构造函数（）{
这个答案=41；
}
$onInit（）{
这个.答案++；
}
};
angular.module（'myApp'）
.component（'myComponent'，myComponent）；

---

Pascal在这里也写了一些关于它的东西：

如果我将控制器定义更改为controller:function（）{，那么问题就消失了。。

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

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

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