[英]Passing array from parent component to child component in AngularJS
I have a parent component called edResults. 我有一个名为edResults的父组件。 This component is responsible for pulling data from an API and displaying the data in a table.
该组件负责从API提取数据并在表中显示数据。
Part of the table is a child component called profileImageScroller. 该表的一部分是一个名为profileImageScroller的子组件。 This component is responsible for outputting the profile images in a custom scroller component.
该组件负责在自定义滚动器组件中输出配置文件图像。
I am trying to pass the profile images as an array from edResults to profileImageScroller, but with no luck. 我正在尝试将配置文件图像作为数组从edResults传递到profileImageScroller,但是没有运气。 For some reason profileImageScroller does not see the image array.
由于某些原因,profileImageScroller无法看到图像数组。
The following are the relevant parts of my code: 以下是我的代码的相关部分:
edResults.html: 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: 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
}
})();
Why does the child component not receive the image array as passed from the parent component? 子组件为什么不接收从父组件传递来的图像数组?
Bindings get available inside the $onInit
hook. 绑定在
$onInit
挂钩中可用。 Before that, bindings haven't been linked I think. 我认为在此之前,绑定还没有链接。 Hence, the following should do it:
因此,应执行以下操作:
app.component('profileImageScroller', {
bindings: {
images: '<'
},
templateUrl: '...',
controller: function() {
this.$onInit = function() {
console.log(this.images);
}
}
});
You can read more about it at the docs : 您可以在docs上阅读有关此内容的更多信息:
$onInit()
- Called on each controller after all the controllers on an element have been constructed and had their bindings initialized .
构造完元素上的所有控制器并初始化其绑定后,在每个控制器上调用。 This is a good place to put initialization code for your controller.
这是放置控制器初始化代码的好地方。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.