角度1.5分量和通天塔 [英] angular 1.5 component and babel

问题描述

因此，我尝试使用1.5组件功能，但使用粗箭头进行编码.我正在使用babel来构建系统

so, I'm trying to use the 1.5 component feature, but coding with fat arrows. I am using babel to build the system

我的组件被精简到最低限度以显示我的问题，因此是:

My component, stripped down to the bare minimum to show my problem, is thus:

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

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

当我尝试加载此组件时，出现错误消息

when I try and load this component, I get an error complaining about

typeError: Cannot set property '$onInit' of undefined

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

so, when I look at the sources in chrome devtools, I see

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

});

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

I would expect that I have done something very wrong, but can't see it ;)

任何人有任何提示吗?

谢谢

推荐答案

Angular为每个组件创建新的控制器实例.在ES5中，我们没有类，因此我们在此处传递构造函数.

Angular creates new instantion of controller for every component. In ES5 we dont have classes, so we pass construction function here.

但是在es6中，我们有类，因此您可以改用它

But in es6 we have class, so you can use it instead

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

Pascal has also written something about it here: http://blog.thoughtram.io/angularjs/es6/2015/01/23/exploring-angular-1.3-using-es6.html

这篇关于角度1.5分量和通天塔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！