從父組件傳遞數組到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你可以閱讀更多和的綁定初始化爲。這是放置控制器初始化代碼的好地方。