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

Posted 2023-02-23

【中文标题】访问组件控制器中的角度组件参数

【英文标题】：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 环境

【参考方案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
            ;
        
    );
());