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それについての詳細を読むことができますは、その結合が初期化されたであった。これはあなたのコントローラの初期化コードを置くのに適しています。