Question

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

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

以下是当前的路由器配置：

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>。

EventsTableController是一个通用控制器，它存储所显示的数据类型（在本例中为“details”），以及存储为二维数组的数据本身。

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

Angular UI路由器 - 如何将数据从父状态传递到嵌套视图

1 个答案: