Routeur d'interface utilisateur, transfert de données depuis le contrôleur parent

Question

Je tente de refactoriser un site Web en Angular via UI-Router. Sur le composant parent, j'ai défini certaines données sur le contrôleur. Comment puis-je transmettre ces données au composant routé imbriqué de l'enfant via UI-Router? La résolution de l'UI-Router ne fonctionne que lorsque vous avez une liaison sur les données, mais je ne sais pas s'il est possible de lier les données du contrôleur parent au composant parent.

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

Fondamentalement, vous avez un identifiant unique de votre enregistrement dans l'URL. Ainsi, vous pouvez à nouveau récupérer vos données à partir de l'ensemble de données. Pour atteindre la même chose, je vous suggère de mettre vos données en service, puis récupérer les mêmes données dans la résolution de votre état. Appliquez ensuite un filtre sur les données et obtenez l'enregistrement souhaité à partir de ce paramètre en fonction du paramètre d'état childUrl.

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; 
    } 

}); 

état

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]; 
     } 
    } 
    } 
]; 

Et à l'intérieur d'un contrôleur de parent, vous pouvez récupérer les données du service directement.

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