Question

我的应用中有这个组件：

<actions-bar actions="$ctrl.actionsBarData"></actions-bar>

这是控制器/组件定义：

.component('actionsBar', {
    controller: 'actionsBarController',
    bindings: {
        actions: '<'
    }
})

.controller('actionsBarController', function() {

    var vm = this;

    vm.$onInit = function() {
        console.log(vm.actions);
        setTimeout(function() {
            console.log(vm.actions);
        }, 500);
    };
});

记下console.log中的两个$onInit语句。在浏览器中，第一个日志记录语句打印undefined。包含在setTimeout中的第二个语句正确打印出this.actions对象。

根据Angular文档：

$ onInit（） - 在一个控制器上的所有控制器上调用每个控制器已经构造了元素并初始化了它们的绑定

如果绑定已初始化，为什么数据不能立即可用？为什么我必须在可用之前设置500毫秒的延迟？

如果此处的解决方案不是$onInit，我如何可靠地访问控制器中的绑定数据？看来这是正确使用的生命周期钩子，在这种情况下，其他钩子似乎都不是我想要的。

Answer 1

这是因为虽然绑定已在控制器中初始化，但它们尚未在它们来自的地方初始化。如果使用异步调用填充绑定，则对象将是未定义的或空的。

$ onChanges允许您检查绑定发生的更改。

vm.$onChanges = function (changesObj) {
    console.log(changesObj.actions);
}

如果我上面描述的内容正在发生，这将为您解决。

编辑：一个字

$ onInit不会立即拥有绑定数据

1 个答案: