UI Router, передача данных из родительского контроллера

Question

Я пытаюсь реорганизовать сайт в Angular через UI-Router. На родительском компоненте я определил некоторые данные на контроллере. Как передать эти данные дочернему вложенному маршрутизируемому компоненту через 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 параметр состояния.

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

});

государство

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

А внутри родительского контроллера вы можете напрямую получать данные из сервиса.

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