Question

我有一个ui.router状态，我需要在其中解析一些数据，但在加载控制器之后和加载模板之前它似乎已解决。

州定义如下：

$stateProvider
         .state( 'route', {
            url: '/update/:id',
            template: '<update order="$resolve.order"></update>',
            resolve: {
                order: function( OrdersService, $stateParams ) {
                    return OrdersService.get( $stateParams.id ).$promise
                }
            }
        } )

组件：

const Update = {
    bindings: {
       order: "<"
    },
    controller,
    template
};

angular.module( 'app' )
    .component( 'update', Update );

控制器：

export default class UpdateCtrl {
    constructor(){
         ...
         console.log(this.order);
         ...
    }
}

OrdersService：

class OrdersService {
    constructor( $resource, api_name ) {
        this.$resource = $resource( api_name + '/orders/:id', { id: '@id' }, {
            get: { method: 'GET' }
        } );
    }
    get( orderId ) {
        return this.$resource.get( { orderId } );
    }
}
angular.module( 'app' )
    .factory( 'OrdersService', [
        '$resource',
        'api_name',
        ( $resource, api_name ) => new OrdersService( $resource, api_name )
    ] );

所有导入都很好，我仍然可以从控制器获取以及模板中的完整数据

console.log(this.order) // undefined

P.S。当我在控制器构造函数中调用console.log(this.order,this)时，我发现了一些奇怪的行为它打印到控制台

undefined OrderUpdateCtrl
             $stateParams:Object
             OrdersService:OrdersService
             order:Resource // full resolved object
             __proto__:Object

Answer 1

已在official documentation中描述：

您可以使用resolve为您的控制器提供内容或数据这是国家的习惯。 resolve是可选的地图应该注入控制器的依赖项。

所以你需要在ui-router状态的控制器中注入order。

Answer 2

您正在观察的行为是有道理的。您的console.log调用位于控制器的构造函数中，并且您没有提供Angular可用于注入order的参数，使构造函数可用。

在新建控制器之前，Angular实际上正在解析order，但它不能将$ resolve.order添加到控制器，直到控制器对象存在之后。因此order在构造函数中不存在，但在呈现模板之前将存在。

您的OrdersService也有问题。您的get函数永远不会传递id参数（它会传递orderId，这在您的路线中未定义）。很可能，您的API永远不会被正确调用。将参数对象更改为{id: orderId}，您应该处于良好状态。

Answer 3

在这里找到答案
How to wait for binding in Angular 1.5 component (without $scope.$watch)

我应该只使用$ onChanges挂钩等待解析promise

组件中的角度解析

3 个答案: