2

我正在尝试通过 UI-Router 将网站重构为 Angular。在父组件上，我在控制器上定义了一些数据。如何通过 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',
  });
4

1 回答 1

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();
}
于 2017-06-24T05:37:36.130 回答