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

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);
    }
  }
});

您可以在docs上阅读有关此内容的更多信息：

$onInit()

• 构造完元素上的所有控制器并初始化其绑定后，在每个控制器上调用。 这是放置控制器初始化代码的好地方。