从父组件传递数组到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钩子内可用。在此之前，我认为绑定没有链接。因此，下面应该这样做：

$onInit()

• 调用每个控制器上已建成的所有元素在控制器后：

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

  它at the docs你可以阅读更多和的绑定初始化为。这是放置控制器初始化代码的好地方。