UIルータ、親コントローラからデータを渡す

Question

UI-Routerを通じてAngularにWebサイトをリファクタリングしようとしています。親コンポーネントでは、コントローラ上にいくつかのデータを定義しました。このデータをUI-Router経由で子ネストされたルーティングコンポーネントに渡すにはどうすればよいですか？ UI-Routerの解決は、データにバインディングがある場合にのみ機能しますが、親コントローラのデータを親コンポーネントにバインドすることが可能かどうかはわかりません。

const main = angular.module('main', ['ui.router']); 

main.config(function($stateProvider) { 
    const states = [ 
     { name: 'parent', url: '/parent', component: 'parent' }, 
     { name: 'parent.child', url: '/{childUrl}', component: 'child', 
     resolve: { 
      data: function($transition$) { 
      // I want to pass in { name: 'Name1', content: 'Page-Long Content1' }, { name: 'Name2', content: Page-Long Content2' } 
      // How do I do this? 
      } 
     } 
     } 
    ]; 
    states.forEach(function(state) { 
     $stateProvider.state(state); 
    }); 
    }); 

angular.module('main') 
    .component('parent', { 
    template: 
    '<div ng-repeat="data in $ctrl.data">' + 
    '<p>{{data.name}}</p>' + 
    '<a ui-sref="parent.child({ childUrl: data.name })" ui-sref-active="active">Child link</a>' + 
    '</div>' + 
    '<ui-view></ui-view>', 

    controller: function() { 
     this.data = [ 
     {name: 'Name1', content: 'Page-Long Content1'}, 
     {name: 'Name2', content: 'Page-Long Content2'} 
     ] 
    } 
    }); 

angular.module('main') 
    .component('child', { 
    bindings: { data: '<' }, 
    templateUrl: 'link.html', 
    }); 

Answer 1

基本的には、URLにあなたのレコードの一意の識別子を持っています。つまり、データセットから再度データを取得することができます。同じことを達成するために、私はあなたのデータをサービスに入れて、あなたの状態を解決して同じデータをフェッチすることをお勧めします。その後、データのフィルターを適用し、状態のパラメーターchildUrlに基づいて、そこから目的のレコードを取得します。状態

const states = [ 
    { name: 'parent', url: '/parent', component: 'parent' }, 
    { name: 'parent.child', url: '/{childUrl}', component: 'child', 
    resolve: { 
     data: function($transition$, dataService) { 
     let childUrl = $transition$.params('childUrl'); 
     //in case of API call below will be changed to promise driven code. 
     return dataService.getData().filter((item) => item.name === childUrl)[0]; 
     } 
    } 
    } 
]; 

そして、あなたが直接サービスからデータを取得することができ、親コントローラ内部の

angular.module('main') 
.service('dataService', function(){ 
    var dataService = this; 
    dataService.getData = getData; 
    var data = [ 
     {name: 'Name1', content: 'Page-Long Content1'}, 
     {name: 'Name2', content: 'Page-Long Content2'} 
    ]; 

    function getData(){ 
     return data; 
    } 

}); 

。

controller: function(dataService) { 
    this.data = dataService.getData(); 
}