Question

我试图通过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',
  });

Answer 1

基本上，您在网址中拥有记录的唯一标识符。因此，您可以再次从数据集中检索数据。为了实现这一点，我建议您将数据投入使用，然后在解决您的状态时获取相同的数据。然后对数据应用过滤器，并根据状态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();
}

UI路由器，从父控制器传递数据

1 个答案: