Angular UI Router - 如何将解析数据从父状态传递到嵌套视图

Question

我目前正在开发一个 Angular Web 应用程序，它将为用户显示各种类型的财务事件。这些事件在一个 ID 下捆绑在一起，组织成不同的组。这些组中的每一个都需要以自己单独的 HTML <table> 显示。

使用 Angular 服务检索财务数据，并在 Angular UI 路由器配置中解析。所有数据也存储在同一个服务中。

以下是当前路由器配置：

import EventsController from './events.controller';
import EventsService from './events.service';
import EventsTableController from './events-tables/events-table.controller';

import eventsView from './events.html';
import eventsDetailsTableView from './events-tables/details-table.html';

export default function routes($stateProvider) {
    $stateProvider
        .state('events', {
            url: '/events/{payDate:string}',
            template: eventsView,
            controller: EventsController,
            controllerAs: 'events',
            resolve: {
                eventsData: ['$http', '$stateParams', ($http, $stateParams) => {
                    return new EventsService($http, $stateParams);
                }]
            },
            views: {
                'details@': {
                    template: eventsDetailsTableView,
                    controller: EventsTableController,
                    controllerAs: 'details',
                    resolve: {
                        eventData: 'eventsData.details'
                    }
                }
            }
        }
    );
}

routes.$inject = ['$stateProvider'];

将来，EventsController 将用于根据用户的偏好过滤将显示哪些<table>s。

EventsTableController 是一个通用控制器，它存储正在显示的数据类型（在本例中为“详细信息”）和数据本身，存储为二维数组。

export default class EventsTableController {
    constructor(eventData) {
        this.name = eventData.name;
        this.data = eventData.data;
        console.log(this)
    }
}

也供参考，下面是从服务返回的数据示例：

{
    'details': [[
        "Event-ID",
        "Company-CUSIP",
        "Company-Name"]
    ]
}

每个<table> 将对应于该对象中的不同字段。

但是，我在将数据从'events' 状态的resolve 传递到嵌套的details@ 视图时遇到了麻烦。上面的配置返回错误，说明Angular UI Router无法找到具体的依赖：'eventsData.details'。

我的问题是：如何将单个对象字段传递到嵌套视图中，以便它们都可以独立显示？如果我可以提供更多的来源信息，请告诉我，我会修改这篇文章以清楚起见。

Answer 1

默认情况下，来自父级的解析在子状态和命名视图中可用。

如果你在一个状态中有multiple named views，并且他们需要使用状态的一个解析，你可以在控制器中正常注入它们，例如：

EventsTableController.$inject = ['eventsData
function EventsTableController(eventsData) {
    console.log(eventsData);
}

子状态也从父状态继承已解决的依赖关系。例如（resA）：

$stateProvider.state('parent', {
      resolve:{
         resA:  function(){
            return {'value': 'A'};
         }
      },
      controller: function($scope, resA){
          $scope.resA = resA.value;
      }
   })
   .state('parent.child', {
      resolve:{
         resB: function(resA){
            return {'value': resA.value + 'B'};
         }
      },
      controller: function($scope, resA, resB){
          $scope.resA2 = resA.value;
          $scope.resB = resB.value;
      }