访问组件控制器中的角度组件参数答案

【问题标题】：accessing angular component parameters in the component's controller访问组件控制器中的角度组件参数
【发布时间】：2017-05-21 17:34:02
【问题描述】：

我在访问组件控制器中的组件参数时遇到问题。

(function() {
'use strict';

angular.module('myapp')
    .component('myComponent', {
        bindings: {
            name: '='
        },
        template: `<div>{{$ctrl.name}}</div>`,
        controller: function () {
            console.log(this.name); //displays undefined
        }
    });
}());

<my-component name="'mytest'"></my-component>

这会在页面上输出“mytest”，因此模板中的 {{$ctrl.name}} 确实有效。但是，当我尝试 console.log 控制器中的变量时，我得到了“未定义”。

谢谢

【问题讨论】：

如果是我，我会选择单独定义控制器函数作为最佳实践，而不必担心这样的副作用。
plnkr.co/edit/iFTbXc49tqiSFHMvMNNL?p=preview 你的代码有效
它适用于 plunker 但不适用于我的 gulp/browsersync 环境

标签： javascript angularjs components angular-components

【解决方案1】：

我可以通过向组件的控制器添加 $doCheck 挂钩来解决此问题

angular.module('myapp')
    .component('myComponent', {
        bindings: {
            name: '='
        },
        template: `<div>{{$ctrl.name}}</div>`,
        controller: function () {
            console.log(this.name); //displays undefined

            this.$doCheck = function() {
                console.log(this.name); //works
            };
        }
    });
}());

【讨论】：