`$onInit()`

Question

我有一个名为edResults的父组件。该组件负责从API中提取数据并在表格中显示数据。

表的一部分是名为profileImageScroller的子组件。该组件负责在自定义滚动条组件中输出配置文件图像。

我正在尝试将配置文件图像作为数组从edResults传递给profileImageScroller，但没有运气。由于某种原因，profileImageScroller没有看到图像数组。

以下是我的代码的相关部分：

edResults.html：

<img src="{{$ctrl.images[0]}}"> <!--This does work and outputs first image-->
<profile-image-scroller images="$ctrl.images"></profile-image-scroller>

profileImageScroller.js：

(function () {
angular.module("brrrp").component('profileImageScroller', {
    bindings: {
        images : '<'
    },
    templateUrl: 'controls/profileImageScroller/profileImageScroller.html',
    controller: profileImageScrollerController
});


function profileImageScrollerController() {
    console.log(this.images); //this line is reached but this.images is empty
}
})();

为什么子组件没有收到从父组件传递的图像数组？

Answer 1

绑定在$onInit钩子内可用。在此之前，我认为绑定还没有联系起来。因此，以下应该这样做：

app.component('profileImageScroller', {
  bindings: {
    images: '<'
  },
  templateUrl: '...',
  controller: function() {
    this.$onInit = function() {
      console.log(this.images);
    }
  }
});

您可以详细了解at the docs：

$onInit()


在构建了元素上的所有控制器并且已初始化其绑定之后，在每个控制器上调用。这是为控制器放置初始化代码的好地方。

将数组从父组件传递到AngularJS中的子组件

1 个答案:

`$onInit()`