组件 $onInit() 在控制器中看不到变量 - angularjs 1.6.x

Posted 2023-02-23

【中文标题】组件 $onInit() 在控制器中看不到变量 - angularjs 1.6.x

【英文标题】：Component $onInit() can't see the variable in controller - angularjs 1.6.x

【发布时间】：2017-08-05 04:46:52

【问题描述】：

我正在 1.6.x 中编写 angularjs 应用程序...我遇到了 component() 问题，其中 $onInit() 看不到任何已定义的变量...

每个变量都是未定义的

这是我的代码..

angular.module('carFilter', []).
        component('carFilter', 
            controller: function (carFactory, $http) 
                this.service = carFactory; 
                this.updatedObj = ;
//when i put breakpoint here on chrome, i can see the factory obj.. but..
//when it goes to oninit, init can not see this obj



            this.$onInit = function () 
                    this.testing = 'a';
                    console.log(this.service); //th

                    loadFilter().then(function (result) 

                    updateFilter(result)
                );
            ;

            function loadFilter() 
               //$http here to return promise 
            
            function updateFilter(responseData) 
               //using response data to update i wanted to update the this.updatedObj
               this.updatedObj = responseData;
//but here, when this function is triggered, every object is undefined...
//I tried to put this.sercie and this.updatedObj in $onInit(), but it was still getting UNDEINFED.... 
//it could not see this.testing either...
//how can i update object in the controller??
            
       ,
       templateUrl: 'someURL'
);

提前谢谢你...

【参考方案1】：

当你输入 $onInit function() 时，this 现在指的是 $onInit，所以这就变成了允许从控制器传入的变量 this 的问题。

我知道很多人声明 vm 或 ctrl 取决于你在控制器的第一行从谁那里学到的。

即

var ctrl = this;
ctrl.service = carFactory;

ctrl.$onInit = function() 
    console.log(ctrl.service);

【讨论】：

谢谢，我把代码改成了 var ctrl = this;并改用 ctrl.service 。 'ctrl' 现在肯定指向控制器，但是 ctrl 的属性，例如 ctrl.service 在 $onInit() 中仍然未定义.. 任何提示或见解？？

我并不是很喜欢将工厂分配给控制器内的变量，如果你只是 console.log(carFactory) 会发生什么？可能是注入问题，carFactory 是 carFilter 上的 .factory 吗？

哇..没关系..它确实修复了它。太感谢了。我已经为此奋斗了 4 个小时......我想我对“这个”的作用没有深入的了解......

我使用工厂 b/c 我不得不共享数据.. 还有另一个组件与 carFilter 共享数据，并且基于过滤器，另一个组件使用 chartjs 绘制图表。我对 angularjs 很陌生，我刚刚听说工厂用于共享数据。如果有更好的方法在两个组件之间共享数据，请告诉我！ :)

工厂/服务是在组件之间保存和共享数据的好方法。这在某种程度上取决于您希望如何获取数据。服务更像是可以使用“new”调用的构造函数，而工厂通常用作通过调用工厂来调用的方法列表。我使用工厂从外部或服务器端获取数据，而服务用于可重用的构造器，其方法不包含在服务器端数据中。这不是一篇糟糕的文章blog.thoughtram.io/angular/2015/07/07/…

【参考方案2】：

在 Angular 1.6 中，定义在控制器方法之外的变量会被忽略。您还应该在控制器中定义对象this 上的所有方法。

angular.module('carFilter', []).
    component('carFilter', 
        controller: function (carFactory, $http) 
            this.$onInit = function () 
                this.service = carFactory; 
                this.updatedObj = ;
                this.testing = 'a';
                console.log(this.service);

                this.loadFilter().then(function (result) 
                    this.updateFilter(result)
                .bind(this);
            ;

            this.loadFilter = function() 
               //$http here to return promise 
            ;

            this.updateFilter = function (responseData)             
                this.updatedObj = responseData;
            ;
        ,
        templateUrl: 'someURL'
   );

【参考方案3】：

在函数this 中引用调用该函数的任何对象，这不一定是您的组件。

要确保$onInit 中的this 对象引用您的组件，您可以将其显式绑定到组件this：

this.$onInit = function () 
    ...
;
this.$onInit.bind(this);

或将变量设置为组件的this 并使用闭包在$onInit 中访问它：

var vm = this;

this.$onInit = function () 
    vm.testing = 'a';
    console.log(vm.service); //th

    loadFilter().then(function (result) 
        updateFilter(result)
    );
;

updateFilter 函数也是如此。